FusionCharts圖表顯示雙Y軸雙(多)曲線
更新時間:2012年11月22日 11:25:59 作者:
項目中需要FusionCharts圖表顯示雙Y軸,好像FCF_MSLine.swf不可以這樣,只能顯示一個Y軸,多條線,找了一下,用MSCombiDY2D.swf可以實現(xiàn),現(xiàn)在曬出來和大家分享一下
項目中需要FusionCharts圖表顯示雙Y軸,好像FCF_MSLine.swf不可以這樣,只能顯示一個Y軸,多條線,
找了一下,用MSCombiDY2D.swf可以實現(xiàn),生成圖如下:
兩個圖表的數(shù)據(jù)是一樣的,設(shè)置有一此不同而己
對應(yīng)的XML文本如下:
<chart palette='2' caption='圖表' rotateNames='0' showValues='0' divLineDecimalPrecision='1' limitsDecimalPrecision='1' PYAxisName='價格' SYAxisName='數(shù)量' numberPrefix='$' formatNumberScale='0'>
<categories>
<category label='20121110' />
<category label='20121111' />
<category label='20121112' />
<category label='20121113' />
<category label='20121114' />
<category label='20121115' />
<category label='20121116' />
</categories>
<dataset renderAs='Line' parentYAxis='P' seriesName='Profit'>
<set value='3242' />
<set value='3171' />
<set value='700' />
<set value='1287' />
<set value='1856' />
<set value='987' />
<set value='1610' />
</dataset>
<dataset lineThickness='1' parentYAxis='S' seriesName='數(shù)量' >
<set value='174' />
<set value='197' />
<set value='155' />
<set value='15' />
<set value='66' />
<set value='85' />
<set value='37' />
</dataset>
</chart>
現(xiàn)在要將區(qū)域圖表變?yōu)榍€只需將
<dataset renderAs='Area' parentYAxis='P' seriesName='Profit'>
改為
<dataset renderAs='Line' parentYAxis='P' seriesName='Profit'>
說明:
parentYAxis='P'表示對應(yīng)的為左邊的Y軸
parentYAxis='S'表示對應(yīng)的為右邊的Y軸
renderAs表示形狀,Area 為區(qū)域圖表,Line為曲線圖表
關(guān)于 參數(shù)設(shè)置
功能特性
animation 是否動畫顯示數(shù)據(jù),默認(rèn)為1(True)
showNames 是否顯示橫向坐標(biāo)軸(x軸)標(biāo)簽名稱
rotateNames 是否旋轉(zhuǎn)顯示標(biāo)簽,默認(rèn)為0(False):橫向顯示
showValues 是否在圖表顯示對應(yīng)的數(shù)據(jù)值,默認(rèn)為1(True)
yAxisMinValue 指定縱軸(y軸)最小值,數(shù)字
yAxisMaxValue 指定縱軸(y軸)最小值,數(shù)字
showLimits 是否顯示圖表限值(y軸最大、最小值),默認(rèn)為1(True)
圖表標(biāo)題和軸名稱
caption 圖表主標(biāo)題
subCaption 圖表副標(biāo)題
xAxisName 橫向坐標(biāo)軸(x軸)名稱
yAxisName 縱向坐標(biāo)軸(y軸)名稱
圖表和畫布的樣式
bgColor 圖表背景色,6位16進制顏色值
canvasBgColor 畫布背景色,6位16進制顏色值
canvasBgAlpha 畫布透明度,[0-100]
canvasBorderColor 畫布邊框顏色,6位16進制顏色值
canvasBorderThickness 畫布邊框厚度,[0-100]
shadowAlpha 投影透明度,[0-100]
showLegend 是否顯示系列名,默認(rèn)為1(True)
字體屬性
baseFont 圖表字體樣式
baseFontSize 圖表字體大小
baseFontColor 圖表字體顏色,6位16進制顏色值
outCnvBaseFont 圖表畫布以外的字體樣式
outCnvBaseFontSize 圖表畫布以外的字體大小
outCnvBaseFontColor 圖表畫布以外的字體顏色,6位16進制顏色值
分區(qū)線和網(wǎng)格
numDivLines 畫布內(nèi)部水平分區(qū)線條數(shù),數(shù)字
divLineColor 水平分區(qū)線顏色,6位16進制顏色值
divLineThickness 水平分區(qū)線厚度,[1-5]
divLineAlpha 水平分區(qū)線透明度,[0-100]
showAlternateHGridColor 是否在橫向網(wǎng)格帶交替的顏色,默認(rèn)為0(False)
alternateHGridColor 橫向網(wǎng)格帶交替的顏色,6位16進制顏色值
alternateHGridAlpha 橫向網(wǎng)格帶的透明度,[0-100]
showDivLinues 是否顯示Div行的值,默認(rèn)??
numVDivLines 畫布內(nèi)部垂直分區(qū)線條數(shù),數(shù)字
vDivLineColor 垂直分區(qū)線顏色,6位16進制顏色值
vDivLineThickness 垂直分區(qū)線厚度,[1-5]
vDivLineAlpha 垂直分區(qū)線透明度,[0-100]
showAlternateVGridColor 是否在縱向網(wǎng)格帶交替的顏色,默認(rèn)為0(False)
alternateVGridColor 縱向網(wǎng)格帶交替的顏色,6位16進制顏色值
alternateVGridAlpha 縱向網(wǎng)格帶的透明度,[0-100]
數(shù)字格式
numberPrefix 增加數(shù)字前綴
numberSuffix 增加數(shù)字后綴 % 為 '%25'
formatNumberScale 是否格式化數(shù)字,默認(rèn)為1(True),自動的給你的數(shù)字加上K(千)或M(百萬);若取0,則不加K或M
decimalPrecision 指定小數(shù)位的位數(shù),[0-10] 例如:='0' 取整
divLineDecimalPrecision 指定水平分區(qū)線的值小數(shù)位的位數(shù),[0-10]
limitsDecimalPrecision 指定y軸最大、最小值的小數(shù)位的位數(shù),[0-10]
formatNumber 逗號來分隔數(shù)字(千位,百萬位),默認(rèn)為1(True);若取0,則不加分隔符
decimalSeparator 指定小數(shù)分隔符,默認(rèn)為'.'
thousandSeparator 指定千分位分隔符,默認(rèn)為','
Tool-tip/Hover標(biāo)題
showhovercap 是否顯示懸停說明框,默認(rèn)為1(True)
hoverCapBgColor 懸停說明框背景色,6位16進制顏色值
hoverCapBorderColor 懸停說明框邊框顏色,6位16進制顏色值
hoverCapSepChar 指定懸停說明框內(nèi)值與值之間分隔符,默認(rèn)為','
折線圖的參數(shù)
lineThickness 折線的厚度
anchorRadius 折線節(jié)點半徑,數(shù)字
anchorBgAlpha 折線節(jié)點透明度,[0-100]
anchorBgColor 折線節(jié)點填充顏色,6位16進制顏色值
anchorBorderColor 折線節(jié)點邊框顏色,6位16進制顏色值
Set標(biāo)簽使用的參數(shù)
value 數(shù)據(jù)值
color 顏色
link 鏈接(本窗口打開[Url],新窗口打開[n-Url],調(diào)用JS函數(shù)[JavaScript:函數(shù)])
name 橫向坐標(biāo)軸標(biāo)簽名稱
找了一下,用MSCombiDY2D.swf可以實現(xiàn),生成圖如下:
兩個圖表的數(shù)據(jù)是一樣的,設(shè)置有一此不同而己
對應(yīng)的XML文本如下:
復(fù)制代碼 代碼如下:
<chart palette='2' caption='圖表' rotateNames='0' showValues='0' divLineDecimalPrecision='1' limitsDecimalPrecision='1' PYAxisName='價格' SYAxisName='數(shù)量' numberPrefix='$' formatNumberScale='0'>
<categories>
<category label='20121110' />
<category label='20121111' />
<category label='20121112' />
<category label='20121113' />
<category label='20121114' />
<category label='20121115' />
<category label='20121116' />
</categories>
<dataset renderAs='Line' parentYAxis='P' seriesName='Profit'>
<set value='3242' />
<set value='3171' />
<set value='700' />
<set value='1287' />
<set value='1856' />
<set value='987' />
<set value='1610' />
</dataset>
<dataset lineThickness='1' parentYAxis='S' seriesName='數(shù)量' >
<set value='174' />
<set value='197' />
<set value='155' />
<set value='15' />
<set value='66' />
<set value='85' />
<set value='37' />
</dataset>
</chart>
現(xiàn)在要將區(qū)域圖表變?yōu)榍€只需將
<dataset renderAs='Area' parentYAxis='P' seriesName='Profit'>
改為
<dataset renderAs='Line' parentYAxis='P' seriesName='Profit'>
說明:
parentYAxis='P'表示對應(yīng)的為左邊的Y軸
parentYAxis='S'表示對應(yīng)的為右邊的Y軸
renderAs表示形狀,Area 為區(qū)域圖表,Line為曲線圖表
關(guān)于 參數(shù)設(shè)置
功能特性
animation 是否動畫顯示數(shù)據(jù),默認(rèn)為1(True)
showNames 是否顯示橫向坐標(biāo)軸(x軸)標(biāo)簽名稱
rotateNames 是否旋轉(zhuǎn)顯示標(biāo)簽,默認(rèn)為0(False):橫向顯示
showValues 是否在圖表顯示對應(yīng)的數(shù)據(jù)值,默認(rèn)為1(True)
yAxisMinValue 指定縱軸(y軸)最小值,數(shù)字
yAxisMaxValue 指定縱軸(y軸)最小值,數(shù)字
showLimits 是否顯示圖表限值(y軸最大、最小值),默認(rèn)為1(True)
圖表標(biāo)題和軸名稱
caption 圖表主標(biāo)題
subCaption 圖表副標(biāo)題
xAxisName 橫向坐標(biāo)軸(x軸)名稱
yAxisName 縱向坐標(biāo)軸(y軸)名稱
圖表和畫布的樣式
bgColor 圖表背景色,6位16進制顏色值
canvasBgColor 畫布背景色,6位16進制顏色值
canvasBgAlpha 畫布透明度,[0-100]
canvasBorderColor 畫布邊框顏色,6位16進制顏色值
canvasBorderThickness 畫布邊框厚度,[0-100]
shadowAlpha 投影透明度,[0-100]
showLegend 是否顯示系列名,默認(rèn)為1(True)
字體屬性
baseFont 圖表字體樣式
baseFontSize 圖表字體大小
baseFontColor 圖表字體顏色,6位16進制顏色值
outCnvBaseFont 圖表畫布以外的字體樣式
outCnvBaseFontSize 圖表畫布以外的字體大小
outCnvBaseFontColor 圖表畫布以外的字體顏色,6位16進制顏色值
分區(qū)線和網(wǎng)格
numDivLines 畫布內(nèi)部水平分區(qū)線條數(shù),數(shù)字
divLineColor 水平分區(qū)線顏色,6位16進制顏色值
divLineThickness 水平分區(qū)線厚度,[1-5]
divLineAlpha 水平分區(qū)線透明度,[0-100]
showAlternateHGridColor 是否在橫向網(wǎng)格帶交替的顏色,默認(rèn)為0(False)
alternateHGridColor 橫向網(wǎng)格帶交替的顏色,6位16進制顏色值
alternateHGridAlpha 橫向網(wǎng)格帶的透明度,[0-100]
showDivLinues 是否顯示Div行的值,默認(rèn)??
numVDivLines 畫布內(nèi)部垂直分區(qū)線條數(shù),數(shù)字
vDivLineColor 垂直分區(qū)線顏色,6位16進制顏色值
vDivLineThickness 垂直分區(qū)線厚度,[1-5]
vDivLineAlpha 垂直分區(qū)線透明度,[0-100]
showAlternateVGridColor 是否在縱向網(wǎng)格帶交替的顏色,默認(rèn)為0(False)
alternateVGridColor 縱向網(wǎng)格帶交替的顏色,6位16進制顏色值
alternateVGridAlpha 縱向網(wǎng)格帶的透明度,[0-100]
數(shù)字格式
numberPrefix 增加數(shù)字前綴
numberSuffix 增加數(shù)字后綴 % 為 '%25'
formatNumberScale 是否格式化數(shù)字,默認(rèn)為1(True),自動的給你的數(shù)字加上K(千)或M(百萬);若取0,則不加K或M
decimalPrecision 指定小數(shù)位的位數(shù),[0-10] 例如:='0' 取整
divLineDecimalPrecision 指定水平分區(qū)線的值小數(shù)位的位數(shù),[0-10]
limitsDecimalPrecision 指定y軸最大、最小值的小數(shù)位的位數(shù),[0-10]
formatNumber 逗號來分隔數(shù)字(千位,百萬位),默認(rèn)為1(True);若取0,則不加分隔符
decimalSeparator 指定小數(shù)分隔符,默認(rèn)為'.'
thousandSeparator 指定千分位分隔符,默認(rèn)為','
Tool-tip/Hover標(biāo)題
showhovercap 是否顯示懸停說明框,默認(rèn)為1(True)
hoverCapBgColor 懸停說明框背景色,6位16進制顏色值
hoverCapBorderColor 懸停說明框邊框顏色,6位16進制顏色值
hoverCapSepChar 指定懸停說明框內(nèi)值與值之間分隔符,默認(rèn)為','
折線圖的參數(shù)
lineThickness 折線的厚度
anchorRadius 折線節(jié)點半徑,數(shù)字
anchorBgAlpha 折線節(jié)點透明度,[0-100]
anchorBgColor 折線節(jié)點填充顏色,6位16進制顏色值
anchorBorderColor 折線節(jié)點邊框顏色,6位16進制顏色值
Set標(biāo)簽使用的參數(shù)
value 數(shù)據(jù)值
color 顏色
link 鏈接(本窗口打開[Url],新窗口打開[n-Url],調(diào)用JS函數(shù)[JavaScript:函數(shù)])
name 橫向坐標(biāo)軸標(biāo)簽名稱
您可能感興趣的文章:
- jQuery插件FusionCharts實現(xiàn)的2D柱狀圖效果示例【附demo源碼下載】
- jQuery插件FusionCharts實現(xiàn)的3D柱狀圖效果實例【附demo源碼下載】
- jQuery插件FusionCharts實現(xiàn)的2D餅狀圖效果【附demo源碼下載】
- jQuery插件FusionCharts繪制的3D餅狀圖效果實例【附demo源碼下載】
- 快速解決FusionCharts聯(lián)動的中文亂碼問題
- JSP FusionCharts Free顯示圖表 具體實現(xiàn)
- jQuery插件echarts實現(xiàn)的循環(huán)生成圖效果示例【附demo源碼下載】
- jQuery插件echarts實現(xiàn)的多柱子柱狀圖效果示例【附demo源碼下載】
- jQuery插件Echarts實現(xiàn)的雙軸圖效果示例【附demo源碼下載】
- jQuery插件echarts實現(xiàn)的單折線圖效果示例【附demo源碼下載】
- jQuery插件echarts實現(xiàn)的多折線圖效果示例【附demo源碼下載】
- jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法
- jQuery插件FusionCharts實現(xiàn)的2D面積圖效果示例【附demo源碼下載】
相關(guān)文章
select每選擇一個option選項減少對應(yīng)的option實現(xiàn)方法
這篇文章主要為大家介紹了select每選擇一個option選項減少對應(yīng)的option實現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12asp.net下利用js實現(xiàn)返回上一頁的實現(xiàn)方法小集
其實要實現(xiàn)這個功能主要還是要用到j(luò)avascript2009-11-11淺談js基礎(chǔ)數(shù)據(jù)類型和引用類型,深淺拷貝問題,以及內(nèi)存分配問題
下面小編就為大家?guī)硪黄獪\談js基礎(chǔ)數(shù)據(jù)類型和引用類型,深淺拷貝問題,以及內(nèi)存分配問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09javascript之Object.assign()的痛點分析
這篇文章主要介紹了javascript之Object.assign()的痛點分析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03js實現(xiàn)hashtable的賦值、取值、遍歷操作實例詳解
這篇文章主要介紹了js實現(xiàn)hashtable的賦值、取值、遍歷操作,結(jié)合實例形式分析了哈希表的原理、哈希鍵值對操作相關(guān)技巧,需要的朋友可以參考下2016-12-12