美文网首页
一款web图表工具 jscharts.js

一款web图表工具 jscharts.js

作者: 游园拾忆 | 来源:发表于2017-09-06 09:42 被阅读24次

    jscharts.js 原版不支持中文标题。jscharts_mb.js是修改后,完美支持中文标题。
    在生成一个JSChart实例之后紧跟着执行一个函数patchMbString():

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

    网盘下载地址:http://pan.baidu.com/s/1skAM7UX

    jschart.js应用完整实例

    <!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">走势图显示处</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);  //左侧Y轴距离容器边沿
        myChart.setAxisPaddingTop(66);  //下方侧X轴距离容器边沿
        myChart.setAxisPaddingBottom(40);  //下方侧X轴距离容器边沿
        
        myChart.setDataArray(myData,"河南"); ;  //第一条线的数据
        myChart.setLineColor('#000000','河南'); //第一条线的颜色
        
        myChart.setDataArray(myData2,"河北");  //第二条线的数据
        myChart.setLineColor('#FF0000','河北');//第二条线的颜色
    //  myChart.setLineWidth(5,"河北");        //第二条线的宽度。
    
        myChart.setAxisNameX("价格");         //X轴名称
        myChart.setAxisNameY("日期");         //Y轴名称
        myChart.setAxisNameColor("#FF0000");
        
        myChart.setAxisValuesFontSize(10);//设置两轴上刻度值的字体大小
        myChart.setAxisColor("#000000");  //坐标轴颜色
        myChart.setAxisValuesColor("#000000");  //坐标轴刻度值颜色
    //  myChart.setAxisValuesDecimals();设置曲线图的x/y轴值,默认是auto。
    //  myChart.setAxisValuesNumberX(31)设置x轴上显示的值的个数,此值会自动调整
    //  myChart.setAxisValuesNumberY(50)设置y轴上显示的值的个数,此值会自动调整
        myChart.setGraphExtend(true);//坐标轴向外延伸一点。
        myChart.setGrid(true);//网格
        myChart.setGridOpacity(0.6);//网格透明度
        
        myChart.setTitle("九月走势图");     //自定义图表标题
        myChart.setTitleColor("#FF0000");  //自定义标题样色
        myChart.setTitleFontSize(18);     //自定义标题字体大小
        
        myChart.setTooltip([20,"河南","河南"]);
        myChart.setTooltipFontColor("#000000","河南");
        
        myChart.setTooltip([20,"河北","河北"]);
        myChart.setTooltipFontColor("#FF0000","河北");
    
        myChart.patchMbString();  //支持中文
        myChart.draw();  
      </script> 
    </html>
    

    一些jschart自带的属性方法

    setAxisColor(string hexcolor)设置轴线颜色,对饼图无效。参数为16进制颜色值。
    
    resize(integer x, integer y)重置图表大小,默认x/y为400px/300px,新值应是默认值的整数倍.
    
    setAxisNameColor(string hexcolor)设置轴线名的颜色,对饼图无效。
    
    setAxisNameFontSize(integer fontsize)设置轴线名字体大小,对饼图无效。默认是11。
    
    setAxisNameX(string axisname)设置x轴的名称,对饼图无效。
    
    setAxisNameY(string axisname)设置y轴的名称,对饼图无效。
    
    setAxisPaddingBottom(integer padding)设置x轴和容器底部的距离,默认30。
    
    setAxisPaddingLeft(integer padding)设置y轴和容器左边距的距离,默认40。
    
    setAxisPaddingRight(integer padding)设置图表右边和容器的距离,默认30。
    
    setAxisPaddingTop(integer padding)设置图表上边和容器的距离,默认30。
    
    setAxisValuesColor(string hexcolor)设置x/y轴值刻度值的颜色,对饼图无效。
    
    setAxisValuesDecimals(integer decimals)设置曲线图的x/y轴值,或柱状图的y轴值,对饼图无效,默认是auto。
    
    setAxisValuesFontSize(integer fontsize)设置两轴上值的字体大小,对饼图无效。
    
    setAxisValuesNumberX(integer number)设置x轴上显示的值的个数,此值会自动调整,对饼图无效。
    
    setAxisValuesNumberY(integer number)设置x轴上显示的值的个数,此值会自动调整,对饼图无效。
    
    setAxisWidth(integer width)设置轴的宽度,默认是2。
    
    setBackgroundColor(string hexcolor)设置整个图表的背景颜色,默认是#FFF。
    
    setBackgroundImage(string filename)设置图表的背景图片,图片会自动沿两轴重复。
    
    setBarBorderColor(string hexcolor)设置柱状图的条形边框颜色,只对柱状图有效,默认#C4C4C4。
    
    setBarBorderWidth(integer width)设置柱状图边框宽度,只对柱状图有效。
    
    setBarColor(string hexcolor)设置柱状图所有矩形的颜色,此函数被colorize()函数重写,只对柱状图有效。
    
    setBarOpacity(float opacity)设置柱状图的透明度,值在0~1之间,默认0.9。
    
    setBarSpacingRatio(integer ratio)设置柱状图矩形间距,由此来控制柱状图的宽度,值为0~100之间的整数,默认是10。
    
    setBarValues(boolean values)设置是否在矩形顶端显示值。
    
    setBarValuesColor(string hexcolor)设置柱状图矩形的值的颜色。
    
    setBarValuesDecimals(integer decimals)设置柱状图矩形高度的值,值为十进制数,默认auto。
    
    setBarValuesFontSize(integer fontsize)设置柱状图矩形值的字体大小,默认8.
    
     setCanvasIdPrefix(string prefix)自定义生产元素的ID前缀,默认是JSChart,此值一般不用修改。
    
    setDataArray(array data, string id)将数据以数组的形式导入图表,id参数是可选的,并且可以设置相同的id。
    
    setDataXML(string filename)将数据以xml的形式导入到图表。
    
    setFlagColor(string hexcolor)为提示标志设置颜色。
    
    setFlagOffset(integer offset)设置提示标志的偏移量,只适用于饼图。
    
    setFlagOpacity(float opacity)设置提示标志的透明度,0~1之间,默认0.5.
    
     setFlagRadius(integer radius)设置提示标志的半径,默认3.
    
     setFlagWidth(integer width)设置提示标志边框宽度,默认1.
    
     setGraphExtend(boolean extend)设置是否开启图表延伸功能,默认是false,如果打开,双轴和网格线将扩展当前长度的1/15,这样可以在样式上更加美观.
    
    setGraphLabel(string label)设置自定义图表水印标签文字。
    
    setGraphLabelColor(string hexcolor)设置自定义图表水印标签颜色。
    
    setGraphLabelFontSize(integer fontsize)设置自定义图表水印标签的字体大小,默认8.
    
     setGraphLabelOpacity(float opacity)设置自定义图表水印标签的透明度。
    
    setGraphLabelPosition(string position)设置自定义图表水印标签的位置,取值范围在(nw, ne, sw ,se),分别定位在四个角,默认ne,即右上角。
    
    setGraphLabelShadowColor(string hexcolor)设置自定义图表水印标签的阴影颜色。
    
    setGrid(boolean grid)设置是否显示网格线。
    
    setGridColor(string hexcolor)设置网格线的颜色,默认#C6C6C6。
    
    setGridOpacity(float opacity)设置网格线透明度,取值在0~1之间,默认0.5。
    
    setIntervalEndX(integer end)设置x轴的结束值,如果设置了起始值,则此值必须比起始值大。
    
    setIntervalEndY(integer end)设置y轴的结束值,如果设置了起始值,则此值必须比起始值大。
    
    setIntervalStartX(integer start)设置x轴的起始值,如果设置了结束值,则此值必须比结束值小。
    
    setIntervalStartY(integer start)设置y轴的起始值,如果设置了结束值,则此值必须比结束值小。
    
    setLabelX(array label)在x轴上添加标签,其参数是两个值构成的一个数组,第一个参数为标签在x轴上的位置,第二个值为标签显示的内容。
    
    setLabelY(array label)在y轴上添加标签,其参数是两个值构成的一个数组,第一个参数为标签在y轴上的位置,第二个值为标签显示的内容。
    
    setLineColor(string hexcolor, string id)设置曲线图中曲线的颜色。参见曲线图示例3.
    
     setLineOpacity(float opacity, string id)设置曲线图中曲线的透明度,取值0~1之间,默认0.9。参数id的意义同上。
    
    setLineWidth(integer width, string id)设置曲线图中曲线的宽度,默认2.
    
     setPieOpacity(float opacity)设置饼图的透明度,取值0~1,默认1.
    
     setPiePosition(integer x, integer y)设置饼图在容器内的位置,默认0,即位于容器的中央.
    
    setPieRadius(integer radius)设置饼图的半径。
    
    setPieUnitsColor(string hexcolor)设置饼图块名的颜色。
    
    setPieUnitsFontSize(integer fontsize)设置饼图块名的字体大小。
    
    setPieUnitsOffset(integer offset)设置饼图块名的位置,整数外移,负数内移。
    
    setPieValuesColor(string hexcolor)设置饼图值的颜色。
    
    setPieValuesDecimals(integer decimals)设置饼图上的总值。
    
    setPieValuesFontSize(integer fontsize)设置饼图上值的字体大小。
    
    setPieValuesOffset(integer offset)设置饼图上值的偏移,整数外移,负数内移,默认-20。
    
    setShowXValues(boolean show)是否显示x轴上的刻度值。
    
    setShowYValues(boolean show)是否显示y轴上的刻度值。
    
    setSize(integer x, integer y)预定义容器的大小,需用在draw()函数之前。
    
    setTextPaddingBottom(integer padding)设置x轴上标签文字与容器下边的距离,默认1.
    
     setTextPaddingLeft(integer padding)设置y轴上标签文字与容器左边的距离,默认8.
    
     setTextPaddingTop(integer padding)设置图表顶端与容器上边的距离,默认15.
    
     setTitle(string title)设置图表标题,默认“JSChart”。
    
    setTitleColor(string hexcolor)设置标题颜色。
    
    setTitleFontSize(integer fontsize)设置标题字体大小。
    
    setTitlePosition(string position)设置标题位置,取值范围(center, left , right.)。
    
    setTooltip(array tooltip)设置x轴上提示。
    
    setTooltipBackground(string hexcolor)设置提示背景。
    
    setTooltipBorder(string css)设置提示背景边框风格,参数是css表达式,默认是 1px solid #d3d3d3。
    
    setTooltipFontColor(string hexcolor)设置提示内容颜色。
    
    setTooltipFontFamily(string font)设置提示字体风格,默认arial.
    
     setTooltipFontSize(integer fontsize)设置提示内容字体大小,默认12.
    
     setTooltipOffset(integer offset)设置提示内容偏移,默认7。
    
    setTooltipOpacity(float opacity)设置提示透明度,默认0.7.
    
     setTooltipPadding(string css)设置提示padding样式,默认 2px  5px。
    
    setTooltipPosition(string position)设置提示位置,取值范围 nw, ne, sw and se  默认se。
    
    setLegendShow(boolean show)设置是否显示图例
    

    相关文章

      网友评论

          本文标题:一款web图表工具 jscharts.js

          本文链接:https://www.haomeiwen.com/subject/pzdmjxtx.html