
內容簡介
此外掛擴充 MaxiCharts,使用一個簡單的短代碼來繪製 Gravity Forms 的數據。需要安裝和啟用免費的 MaxiCharts 外掛,當然還需要 Gravity Forms。
>> 示範網站 <<
現在所有程式碼都已移至 GitHub: GitHub 上的 MaxiCharts
使用方法
使用文章視覺編輯器全新的按鈕,在幾次點擊中添加多個短代碼!
短代碼為:
[gfchartsreports gf_form_id="form_id" include="fieldNb1,fieldNb2,fieldNb3,.." exclude="fieldNb4,fieldNb5,..." color_set="set" type="graphType" width="width(px|%)" float="true|false" chart_js_options="options"]
其中所有參數為選填:
gf_form_id:預期 Gravity Forms 中的表單 ID(預設為第一個表單:id=1)
type:為圖表類型,目前僅有 line、pie、doughnut、bar、horizontalBar 可用(預設為 pie)
include:預期要包含的字段 ID(例如:include="1,3,4")
exclude:預期要排除的字段 ID(例如:exclude="2,4,6")
colors:使用您自定義的顏色:一個逗號分隔的十六進位顏色列表
color_set:預期顏色設置的名稱:藍、綠、紅、橙、紫(預設包括不同顏色的標準顏色集)
color_rand:預期為 true 或 false,如果為 true 則會在顏色設置中隨機顏色(預設為 false)
…
參見示範網站上的所有參數
範例
使用自定義的chartjs 選項,以圓餅圖顯示表單 #1 的所有字段並設置標題:
[gfchartsreports chart_js_options="title: {display: true, text: 'My Funky Chart Title', fontSize:28,fontFamily:'Arial',fontColor:'#00B88A',fontStyle:'bold',padding:20}"]
顯示表格 #3 字段 4、7 和 18 的資料,使用橫條狀圖。使用預設顏色。
[gfchartsreports gf_form_id="3" include="4,7,18" type="bar"]
使用預設圓餅圖顯示表格 #2 字段 2。使用紅色設置,不使用隨機顏色。
[gfchartsreports gf_form_id="2" include="2" color_set="red"]
使用橫條狀圖顯示表格 #8 的所有字段,但不顯示字段 4、7 和 18。使用藍色設置,並隨機顏色。
[gfchartsreports gf_form_id="8" exclude="4,7,18" color_set="blue" color_rand="true" type="horizontalBar"]
立即在這裡進行測試:>> 示範網站 <<
外掛標籤
開發者團隊
② 後台搜尋「MaxiCharts Gravity Forms Source add-on」→ 直接安裝(推薦)
原文外掛簡介
Extends MaxiCharts to chart Gravity Forms data with a simple shortcode. Requires installation and activation of free MaxiCharts plugin. And of course Gravity Forms.
>> Demonstration site << All code has been moved to GitHub now : MaxiCharts on Github Usage Use the post visual editor brand new button to add the as many shortcodes as you want in a few clics ! the shortcode is [gfchartsreports gf_form_id="form_id" include="fieldNb1,fieldNb2,fieldNb3,.." exclude="fieldNb4,fieldNb5,..." color_set="set" type="graphType" width="width(px|%)" float="true|false" chart_js_options="options"] where all parameters are optional: gf_form_id : expects the form ID in Gravity Forms (defaults to first form : id=1) type : is the type of graph, at the moment only line,pie,doughnut,bar,horizontalBar available (defaults to pie) include : expects the field ids to include (example : include="1,3,4") exclude : expects the field ids to exlude (example : exclude="2,4,6") colors : to use your custom colors : a list of coma separated hex colors color_set : expects the name of the color set : blue,green,red,orange,purple (defaults to a standard color set including different colors) color_rand : expects true or false and randomizes colors in color set if true (defaults to false) … see all parameters on demonstration site Examples Display all fields of form #1 as pie charts with custom chartjs options for titles: [gfchartsreports chart_js_options="title: {display: true, text: 'My Funky Chart Title', fontSize:28,fontFamily:'Arial',fontColor:'#00B88A',fontStyle:'bold',padding:20}"] Displays fields 4, 7 and 18 of gravity form #3 with bar charts. Default colors used. [gfchartsreports gf_form_id="3" include="4,7,18" type="bar"] Displays field 2 of gravity form #2 with default pie chart. Use red color set, with not randomization. [gfchartsreports gf_form_id="2" include="2" color_set="red"] Displays all but fields 4,7,18 of gravity form #8 with horizontalBar type charts. Use blue color set, randomized. [gfchartsreports gf_form_id="8" exclude="4,7,18" color_set="blue" color_rand="true" type="horizontalBar"] Test it live here : >> Demonstration site <<
