大家分享一款ps圖表快速生成插件,PS拉框助手 for mac可以幫助用戶快速制作折線圖、面積圖、柱狀圖、餅圖、雷達圖、 地圖等,PS拉框助手中文版適用于多個版本的Photoshop,而且是免費的,有需要PS拉框助手插件的朋友可以試試哦!
PS拉框助手 for mac官方介紹
PS拉框助手是由非著名UI設計師灰色執照開發的一款基于photoshop的插件,它能夠快速的生成折線圖、柱狀圖、餅圖、雷達圖、全國各省市的地圖、以及按鈕、按鈕組、窗口、輸入框、下拉框、單選、多選、提示、表格、樹等常用的UI元素。
https://mac.orsoon.com/Mac/171729.html
PS拉框助手插件特點
節約時間
一般來說,使用PS繪制真實數據的圖表是一個非常耗時的過程
簡單方便
拉個框,填寫顏色值,點擊確定就可以輕松獲得你想要的圖表效果
自動化
自動化繪制的視覺元素將準確地表示數字、尺寸、間距,實現結果真實可靠。
容易實現
拉框助手生成的界面,開發小哥使用Echarts一定能夠實現,實現效果能與設計圖一致
PS拉框助手mac版使用方法
PS拉框助手插件支持以下版本:Photoshop CC 2015 / 2016 / 2017 / 2018 / 2019/ 2020
以餅圖繪制繪制為例(其他類似)
1、使用PS的矩形選框工具拉一個框(如插件名稱,先拉一個框是必須的),建議你按住Shift鍵拉一個正方形的框
2、選擇餅圖的類型,分別是常見的餅狀圖和南丁格爾玫瑰圖
3、如果您需要繪制的是空心的餅圖,填寫鏤空半徑,它可以是百分比,也可以是具體的像素值
4、默認會生成北京、上海、廣州三個區域的餅圖。你可以根據需要輸入相應的文字和數值,也可以增加或刪除區域
5、點擊確定按鈕,PS拉框助手則會自動給你繪制好你所需要的圖形
隨著互聯網技術特別是網頁應用的發展,我們對在線文檔、輕應用的需求越來越高,很多小伙伴都已經習慣云辦公,在線協同辦公了,常用的就是騰訊文檔、金山文檔、石墨文檔、飛書等,國外主要就是Google Sheet,最近小編發現了一款國人開發高性能前端javascript電子表格,受啟發于Google Sheet,使用HTML5 canvas渲染。接下來,小編分享下入門體驗。
首先放上x-sheet官方開源地址
https://gitee.com/eigi/x-sheet
https://github.com/eiji-th/x-sheet
在線體驗地址:
https://lwebapp.com/example/x-sheet.html
可以從gitee上拉到最新代碼到本地看看,這是一個標準的es6現代化工程,自定義webpack打包,運行后還有代碼分析,其中還有好幾個案例可以參考。
我們先看看README上的功能說明
那么如何啟動一個x-sheet demo呢?由于現在x-sheet還處在開發階段,暫未提供npm包安裝方式,我們可以從源碼打包使用。
git clone https://gitee.com/eigi/x-sheet.git
cd x-sheet
npm i
npm run build
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>X-XWorkSheet</title>
<link href="XSheet.css" rel="stylesheet">
<style>
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
display: block;
}
</style>
<script src="XSheet.js" type="text/javascript"></script>
</head>
<body id="demo">
<script>
const dome = document.getElementById('demo');
const xSheet = new XSheet(demo);
</script>
</body>
</html>
或者直接進入源代碼的example目錄,直接用瀏覽器打開里面的.html文件就能看到官方給的豐富的本地模板和案例了,都是支持在線編輯的excel界面。
以下截圖就展示了官方給出的案例
體驗地址 https://lwebapp.com/example/x-sheet-purchase-order.html
體驗地址 https://lwebapp.com/example/x-sheet-outbound-order.html
體驗地址 https://lwebapp.com/example/x-sheet-inventory-details.html
體驗地址 https://lwebapp.com/example/x-sheet-travel-plan.html
體驗地址 https://lwebapp.com/example/x-sheet-project-plan.html
體驗地址 https://lwebapp.com/example/x-sheet-calendar-2019.html
體驗地址 https://lwebapp.com/example/x-sheet-calendar-2020.html
體驗地址 https://lwebapp.com/example/x-sheet-multi-instance.html
體驗地址 https://lwebapp.com/example/x-sheet-50000-rows-test.html
體驗地址 https://lwebapp.com/example/x-sheet-1000000-rows-test.html
大致體驗了下x-sheet,可以說可圈可點
當然也有些不足,比如不支持協同,快捷鍵支持不完善等,小編體驗x-sheet時,x-sheet還處于開發階段,所以難免有些bug存在,如果要在生產使用,需要自己多做測試。這是一款國人開發的開源免費的電子表格,希望大家多多給予支持,也歡迎踴躍提交issue和PR交流探討,希望作者能添加更多功能,繼續維護好這個表格插件。
小墨是前端」專注分享前端技術,推薦優秀的開源項目,展示Github、Gitee上的創意作品,帶你深入前端底層,一起成長。
大家好,本期給大家推薦一個超棒Vue插件vue-plugin-hiprint,它是一款hiprint封裝的Vue插件,可以讓你快速生成可視化報表。
一款基于 hiprint 的 Vue 插件vue-plugin-hiprint ,是一個生成和打印可視化報表的工具。hiprint 是一個 html5 的在線打印設計器,支持不同類型的數據源和打印模式。為了方便在 Vue 項目中使用,vue-plugin-hiprint 把 hiprint 封裝成一個 Vue 組件。無論你是需要打印表格、圖表、條形碼、二維碼,還是需要打印發票、訂單、標簽、證書,vue-plugin-hiprint 都可以幫你實現。
1、簡單易用: 只需通過npm引入插件,就可以在 Vue 項目中使用 hiprint 的所有功能,無需額外的配置和代碼。
2、視化設計: hiprint 提供了一套可視化設計器,簡單的進行拖拽、縮放、旋轉、復制、刪除,實現自定義的報表布局和樣式。
3、支持多種數據源: 支持靜態數據、動態數據、本地數據、遠程數據等多種數據源。
4、多種打印模式: 支持普通打印、連續打印、分頁打印、套打等多種打印模式。
5、支持多種HTML元素: 文本、圖片、表格、圖表、條形碼、二維碼、水印多種元素,可以滿足各種復雜場景的報表需求。
1、安裝插件:使用 npm 安裝插件,命令如下:
npm install vue-plugin-hiprint --save
2、引入插件:在 main.js 中引入插件,并注冊為全局組件,代碼如下:
import VuePluginHiprint from 'vue-plugin-hiprint';
Vue.use(VuePluginHiprint)
3、使用組件:在需要使用 hiprint 的頁面中,使用 <vue-plugin-hiprint> 標簽,傳入相應的屬性和事件,代碼如下:
<template>
<div id="app">
<vue-plugin-hiprint
:designer="true"
:data="data"
:url="url"
:template="template"
@save="save"
@print="print"
/>
</div>
</template>
<script>
export default {
data() {
return {
data: {}, // 靜態數據或動態數據
url: '', // 遠程數據的地址
template: '', // 報表模板的地址
};
},
methods: {
save(template) {
// 保存報表模板的方法
},
print() {
// 打印報表的方法
},
},
};
</script>
4、設計報表:在瀏覽器中可看到 hiprint 的設計器界面。在左側的工具欄中可以選擇需要的元素,拖拽到右側的畫布中,進行設計。在右側的屬性欄中修改元素的屬性,如大小、位置、顏色、字體等。
GitHub:https://github.com/CcSimple/vue-plugin-hiprint
Gitee:https://gitee.com/ccsimple/vue-plugin-hiprint
vue-plugin-hiprint將hiprint的強大打印功能無縫集成到您的Vue應用程序中。使用簡單易用的可視化設計界面,像搭積木一樣,輕松拖拽各種元素,就能設計出精美的報表。并且支持多種數據源,比如:JSON、CSV、XML、數據庫等,讓您無需編碼即可快速生成報表。支持多種打印模式,包括本地打印、網絡打印、PDF導出,選擇最適合您的打印方式。還提供了豐富的元素,包括文本、表格、圖表、條形碼、二維碼等,讓您輕松創建各種復雜的報表。所以無論您是需要打印發票、訂單、標簽、證書,還是需要打印表格、圖表、條形碼、二維碼,vue-plugin-hiprint都能輕松滿足您的需求。它將成為您報表打印的得力助手,讓您告別繁瑣的編碼工作,輕松實現報表打印的自動化。
趕緊來試試吧!
創作不易,歡迎大家關注、點贊、收藏、轉發!我會繼續分享高質量的干貨和前沿的技術,給大家提供更多有價值的內容!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。