JScharts插件简介

JCharts插件

JScharts是一个用于在浏览器直接绘制图表的JavaScript工具包。JScharts支持柱状图、圆饼图以及线性图，可以直接将这个图 插入网页，JScharts图的数据可以来源于XML文件、JSON文件或JavaScript数组变量。JScharts兼容所有主流的浏览器，且使用时无需任何服务器端的插件或模块，是纯JavaScript组件，开源免费。

（1）柱状图如图2-7所示

图2-7 jCharts柱状图

（2）饼图如图2-8所示

图2-8 jCharts饼图

（3）折线图如图2-9所示

图2-9 jCharts折线图

还有其他更复杂的图示此处不展示，可以上查看：

http://www.jscharts.com/examples

for example:

<script type="text/javascript">
    var myData = new Array([‘不满意‘, 22], [‘一般满意‘, 15], [‘满意‘, 63]);
    var colors = [‘#FA5E1F‘, ‘#FDCB3F‘, ‘#71D743‘];
    var myChart = new JSChart(‘graph‘, ‘bar‘);
    myChart.setDataArray(myData);
    myChart.colorizeBars(colors);
    myChart.setTitle(‘Host distribution per macroareas‘);
    myChart.setTitleColor(‘#8E8E8E‘);
    myChart.setAxisNameX(‘Region‘);
    myChart.setAxisNameY(‘%‘);
    myChart.setAxisColor(‘#c6c6c6‘);
    myChart.setAxisWidth(1);
    myChart.setAxisNameColor(‘#9a9a9a‘);
    myChart.setAxisValuesColor(‘#939393‘);
    myChart.setAxisPaddingTop(60);
    myChart.setAxisPaddingLeft(50);
    myChart.setAxisPaddingBottom(60);
    myChart.setTextPaddingBottom(20);
    myChart.setTextPaddingLeft(15);
    myChart.setTitleFontSize(11);
    myChart.setBarBorderWidth(0);
    myChart.setBarSpacingRatio(50);
    myChart.setBarValuesColor(‘#737373‘);
    myChart.setGrid(false);
    myChart.setSize(616, 321);
    myChart.setBackgroundImage(‘chart_bg.jpg‘);
    myChart.draw();
</script>

运行效果：