一款web圖表工具 jscharts.js

jscharts.js 原版不支持中文標(biāo)題。jscharts_mb.js是修改后，完美支持中文標(biāo)題。
在生成一個(gè)JSChart實(shí)例之后緊跟著執(zhí)行一個(gè)函數(shù)patchMbString()：

var myChart = new JSChart('chart', 'line');
myChart.patchMbString();
myChart.setTitle('9月支出');
myChart.········

網(wǎng)盤下載地址：http://pan.baidu.com/s/1skAM7UX

jschart.js應(yīng)用完整實(shí)例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>  
    <title>JScharts Test</title>  
    <script type="text/javascript" src="${basepath}/resource/js/jscharts_mb.js"></script>  
  </head>  
  <body>  
    <div id="chart1">走勢(shì)圖顯示處</div>  
  </body>  
  <script type="text/javascript">  
    var myData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);  
    var myData2 = new Array([10,25], [15,15], [20,35], [25,15], [30,10]);  

    var myChart = new JSChart('chart1', 'line');  
    myChart.resize(900,500);
    myChart.setAxisPaddingLeft(50);  //左側(cè)Y軸距離容器邊沿
    myChart.setAxisPaddingTop(66);  //下方側(cè)X軸距離容器邊沿
    myChart.setAxisPaddingBottom(40);  //下方側(cè)X軸距離容器邊沿
    
    myChart.setDataArray(myData,"河南"); ;  //第一條線的數(shù)據(jù)
    myChart.setLineColor('#000000','河南'); //第一條線的顏色
    
    myChart.setDataArray(myData2,"河北");  //第二條線的數(shù)據(jù)
    myChart.setLineColor('#FF0000','河北');//第二條線的顏色
//  myChart.setLineWidth(5,"河北");        //第二條線的寬度。

    myChart.setAxisNameX("價(jià)格");         //X軸名稱
    myChart.setAxisNameY("日期");         //Y軸名稱
    myChart.setAxisNameColor("#FF0000");
    
    myChart.setAxisValuesFontSize(10);//設(shè)置兩軸上刻度值的字體大小
    myChart.setAxisColor("#000000");  //坐標(biāo)軸顏色
    myChart.setAxisValuesColor("#000000");  //坐標(biāo)軸刻度值顏色
//  myChart.setAxisValuesDecimals();設(shè)置曲線圖的x/y軸值，默認(rèn)是auto。
//  myChart.setAxisValuesNumberX(31)設(shè)置x軸上顯示的值的個(gè)數(shù)，此值會(huì)自動(dòng)調(diào)整
//  myChart.setAxisValuesNumberY(50)設(shè)置y軸上顯示的值的個(gè)數(shù)，此值會(huì)自動(dòng)調(diào)整
    myChart.setGraphExtend(true);//坐標(biāo)軸向外延伸一點(diǎn)。
    myChart.setGrid(true);//網(wǎng)格
    myChart.setGridOpacity(0.6);//網(wǎng)格透明度
    
    myChart.setTitle("九月走勢(shì)圖");     //自定義圖表標(biāo)題
    myChart.setTitleColor("#FF0000");  //自定義標(biāo)題樣色
    myChart.setTitleFontSize(18);     //自定義標(biāo)題字體大小
    
    myChart.setTooltip([20,"河南","河南"]);
    myChart.setTooltipFontColor("#000000","河南");
    
    myChart.setTooltip([20,"河北","河北"]);
    myChart.setTooltipFontColor("#FF0000","河北");

    myChart.patchMbString();  //支持中文
    myChart.draw();  
  </script> 
</html>

一些jschart自帶的屬性方法

setAxisColor(string hexcolor)設(shè)置軸線顏色，對(duì)餅圖無效。參數(shù)為16進(jìn)制顏色值。

resize(integer x, integer y)重置圖表大小，默認(rèn)x/y為400px/300px，新值應(yīng)是默認(rèn)值的整數(shù)倍.

setAxisNameColor(string hexcolor)設(shè)置軸線名的顏色，對(duì)餅圖無效。

setAxisNameFontSize(integer fontsize)設(shè)置軸線名字體大小，對(duì)餅圖無效。默認(rèn)是11。

setAxisNameX(string axisname)設(shè)置x軸的名稱，對(duì)餅圖無效。

setAxisNameY(string axisname)設(shè)置y軸的名稱，對(duì)餅圖無效。

setAxisPaddingBottom(integer padding)設(shè)置x軸和容器底部的距離，默認(rèn)30。

setAxisPaddingLeft(integer padding)設(shè)置y軸和容器左邊距的距離，默認(rèn)40。

setAxisPaddingRight(integer padding)設(shè)置圖表右邊和容器的距離，默認(rèn)30。

setAxisPaddingTop(integer padding)設(shè)置圖表上邊和容器的距離，默認(rèn)30。

setAxisValuesColor(string hexcolor)設(shè)置x/y軸值刻度值的顏色，對(duì)餅圖無效。

setAxisValuesDecimals(integer decimals)設(shè)置曲線圖的x/y軸值，或柱狀圖的y軸值，對(duì)餅圖無效，默認(rèn)是auto。

setAxisValuesFontSize(integer fontsize)設(shè)置兩軸上值的字體大小，對(duì)餅圖無效。

setAxisValuesNumberX(integer number)設(shè)置x軸上顯示的值的個(gè)數(shù)，此值會(huì)自動(dòng)調(diào)整，對(duì)餅圖無效。

setAxisValuesNumberY(integer number)設(shè)置x軸上顯示的值的個(gè)數(shù)，此值會(huì)自動(dòng)調(diào)整，對(duì)餅圖無效。

setAxisWidth(integer width)設(shè)置軸的寬度，默認(rèn)是2。

setBackgroundColor(string hexcolor)設(shè)置整個(gè)圖表的背景顏色，默認(rèn)是#FFF。

setBackgroundImage(string filename)設(shè)置圖表的背景圖片，圖片會(huì)自動(dòng)沿兩軸重復(fù)。

setBarBorderColor(string hexcolor)設(shè)置柱狀圖的條形邊框顏色，只對(duì)柱狀圖有效，默認(rèn)#C4C4C4。

setBarBorderWidth(integer width)設(shè)置柱狀圖邊框?qū)挾?，只?duì)柱狀圖有效。

setBarColor(string hexcolor)設(shè)置柱狀圖所有矩形的顏色，此函數(shù)被colorize()函數(shù)重寫，只對(duì)柱狀圖有效。

setBarOpacity(float opacity)設(shè)置柱狀圖的透明度，值在0～1之間，默認(rèn)0.9。

setBarSpacingRatio(integer ratio)設(shè)置柱狀圖矩形間距，由此來控制柱狀圖的寬度，值為0～100之間的整數(shù)，默認(rèn)是10。

setBarValues(boolean values)設(shè)置是否在矩形頂端顯示值。

setBarValuesColor(string hexcolor)設(shè)置柱狀圖矩形的值的顏色。

setBarValuesDecimals(integer decimals)設(shè)置柱狀圖矩形高度的值，值為十進(jìn)制數(shù)，默認(rèn)auto。

setBarValuesFontSize(integer fontsize)設(shè)置柱狀圖矩形值的字體大小，默認(rèn)8.

 setCanvasIdPrefix(string prefix)自定義生產(chǎn)元素的ID前綴，默認(rèn)是JSChart，此值一般不用修改。

setDataArray(array data, string id)將數(shù)據(jù)以數(shù)組的形式導(dǎo)入圖表，id參數(shù)是可選的，并且可以設(shè)置相同的id。

setDataXML(string filename)將數(shù)據(jù)以xml的形式導(dǎo)入到圖表。

setFlagColor(string hexcolor)為提示標(biāo)志設(shè)置顏色。

setFlagOffset(integer offset)設(shè)置提示標(biāo)志的偏移量，只適用于餅圖。

setFlagOpacity(float opacity)設(shè)置提示標(biāo)志的透明度，0～1之間，默認(rèn)0.5.

 setFlagRadius(integer radius)設(shè)置提示標(biāo)志的半徑，默認(rèn)3.

 setFlagWidth(integer width)設(shè)置提示標(biāo)志邊框?qū)挾?，默認(rèn)1.

 setGraphExtend(boolean extend)設(shè)置是否開啟圖表延伸功能，默認(rèn)是false，如果打開，雙軸和網(wǎng)格線將擴(kuò)展當(dāng)前長度的1/15，這樣可以在樣式上更加美觀.

setGraphLabel(string label)設(shè)置自定義圖表水印標(biāo)簽文字。

setGraphLabelColor(string hexcolor)設(shè)置自定義圖表水印標(biāo)簽顏色。

setGraphLabelFontSize(integer fontsize)設(shè)置自定義圖表水印標(biāo)簽的字體大小，默認(rèn)8.

 setGraphLabelOpacity(float opacity)設(shè)置自定義圖表水印標(biāo)簽的透明度。

setGraphLabelPosition(string position)設(shè)置自定義圖表水印標(biāo)簽的位置，取值范圍在（nw, ne, sw ，se），分別定位在四個(gè)角，默認(rèn)ne，即右上角。

setGraphLabelShadowColor(string hexcolor)設(shè)置自定義圖表水印標(biāo)簽的陰影顏色。

setGrid(boolean grid)設(shè)置是否顯示網(wǎng)格線。

setGridColor(string hexcolor)設(shè)置網(wǎng)格線的顏色，默認(rèn)#C6C6C6。

setGridOpacity(float opacity)設(shè)置網(wǎng)格線透明度，取值在0～1之間，默認(rèn)0.5。

setIntervalEndX(integer end)設(shè)置x軸的結(jié)束值，如果設(shè)置了起始值，則此值必須比起始值大。

setIntervalEndY(integer end)設(shè)置y軸的結(jié)束值，如果設(shè)置了起始值，則此值必須比起始值大。

setIntervalStartX(integer start)設(shè)置x軸的起始值，如果設(shè)置了結(jié)束值，則此值必須比結(jié)束值小。

setIntervalStartY(integer start)設(shè)置y軸的起始值，如果設(shè)置了結(jié)束值，則此值必須比結(jié)束值小。

setLabelX(array label)在x軸上添加標(biāo)簽，其參數(shù)是兩個(gè)值構(gòu)成的一個(gè)數(shù)組，第一個(gè)參數(shù)為標(biāo)簽在x軸上的位置，第二個(gè)值為標(biāo)簽顯示的內(nèi)容。

setLabelY(array label)在y軸上添加標(biāo)簽，其參數(shù)是兩個(gè)值構(gòu)成的一個(gè)數(shù)組，第一個(gè)參數(shù)為標(biāo)簽在y軸上的位置，第二個(gè)值為標(biāo)簽顯示的內(nèi)容。

setLineColor(string hexcolor, string id)設(shè)置曲線圖中曲線的顏色。參見曲線圖示例3.

 setLineOpacity(float opacity, string id)設(shè)置曲線圖中曲線的透明度，取值0～1之間，默認(rèn)0.9。參數(shù)id的意義同上。

setLineWidth(integer width, string id)設(shè)置曲線圖中曲線的寬度，默認(rèn)2.

 setPieOpacity(float opacity)設(shè)置餅圖的透明度，取值0～1，默認(rèn)1.

 setPiePosition(integer x, integer y)設(shè)置餅圖在容器內(nèi)的位置，默認(rèn)0，即位于容器的中央.

setPieRadius(integer radius)設(shè)置餅圖的半徑。

setPieUnitsColor(string hexcolor)設(shè)置餅圖塊名的顏色。

setPieUnitsFontSize(integer fontsize)設(shè)置餅圖塊名的字體大小。

setPieUnitsOffset(integer offset)設(shè)置餅圖塊名的位置，整數(shù)外移，負(fù)數(shù)內(nèi)移。

setPieValuesColor(string hexcolor)設(shè)置餅圖值的顏色。

setPieValuesDecimals(integer decimals)設(shè)置餅圖上的總值。

setPieValuesFontSize(integer fontsize)設(shè)置餅圖上值的字體大小。

setPieValuesOffset(integer offset)設(shè)置餅圖上值的偏移，整數(shù)外移，負(fù)數(shù)內(nèi)移，默認(rèn)-20。

setShowXValues(boolean show)是否顯示x軸上的刻度值。

setShowYValues(boolean show)是否顯示y軸上的刻度值。

setSize(integer x, integer y)預(yù)定義容器的大小，需用在draw()函數(shù)之前。

setTextPaddingBottom(integer padding)設(shè)置x軸上標(biāo)簽文字與容器下邊的距離，默認(rèn)1.

 setTextPaddingLeft(integer padding)設(shè)置y軸上標(biāo)簽文字與容器左邊的距離，默認(rèn)8.

 setTextPaddingTop(integer padding)設(shè)置圖表頂端與容器上邊的距離，默認(rèn)15.

 setTitle(string title)設(shè)置圖表標(biāo)題，默認(rèn)“JSChart”。

setTitleColor(string hexcolor)設(shè)置標(biāo)題顏色。

setTitleFontSize(integer fontsize)設(shè)置標(biāo)題字體大小。

setTitlePosition(string position)設(shè)置標(biāo)題位置，取值范圍（center, left ， right.）。

setTooltip(array tooltip)設(shè)置x軸上提示。

setTooltipBackground(string hexcolor)設(shè)置提示背景。

setTooltipBorder(string css)設(shè)置提示背景邊框風(fēng)格，參數(shù)是css表達(dá)式，默認(rèn)是 1px solid #d3d3d3。

setTooltipFontColor(string hexcolor)設(shè)置提示內(nèi)容顏色。

setTooltipFontFamily(string font)設(shè)置提示字體風(fēng)格，默認(rèn)arial.

 setTooltipFontSize(integer fontsize)設(shè)置提示內(nèi)容字體大小，默認(rèn)12.

 setTooltipOffset(integer offset)設(shè)置提示內(nèi)容偏移，默認(rèn)7。

setTooltipOpacity(float opacity)設(shè)置提示透明度，默認(rèn)0.7.

 setTooltipPadding(string css)設(shè)置提示padding樣式，默認(rèn) 2px  5px。

setTooltipPosition(string position)設(shè)置提示位置,取值范圍 nw, ne, sw and se  默認(rèn)se。

setLegendShow(boolean show)設(shè)置是否顯示圖例
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,276評(píng)論 25贊 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,527評(píng)論 4贊 61
  • ￥開啟￥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程，因...
    小菜c閱讀 7,377評(píng)論 0贊 17
  • 父親，我，兒子 父親脾氣暴躁，可是沒有打過我，小時(shí)我喜歡上樹爬高，也曾摔斷過腿，也曾鉆過汽車底下，差點(diǎn)送命，也曾偷...
    一枚冰兒閱讀 306評(píng)論 1贊 0
  • 抓包工具！安裝破解這里就不講了。主要講講大致原理和用法！ 大致原理：將電腦設(shè)置成手機(jī)的http代理（具體原理我也不...
    6灰太狼9閱讀 1,933評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容