当前位置: 代码迷 >> 综合 >> jschart 第一次使用手记
  详细解决方案

jschart 第一次使用手记

热度:50   发布时间:2024-01-12 02:49:26.0

   不可否认,虽然是简单了点,但是出来的效果确实很不错,纯javascript,使用也简单,到www.jscharts.com上面下载了js文件。
然后在需要使用图表的文件中引用下载的这个js文件
<script type="text/javascript" src="jscharts.js"></script>
添加一层放置chart
<div id=graph>Loading graph...</div>
<script type="text/javascript">
 var myData = new Array([10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35, 8], [40, 5], [45, 6], [50, 2.5]);
        var myData=new Array();
        myData[0]=new Array(10, 2);
        myData[1]=new Array(15, 0);
        myData[2]=new Array(18, 3);
 var myChart = new JSChart('graph', 'line');
 myChart.setDataArray(myData);
 myChart.setAxisNameFontSize(10);
 myChart.setAxisNameX('Horizontal axis values');
 myChart.setAxisNameY('Vertical axis');
 myChart.setAxisNameColor('#787878');
 myChart.setAxisValuesNumberX(6);
 myChart.setAxisValuesNumberY(5);
 myChart.setAxisValuesColor('#38a4d9');
 myChart.setAxisColor('#38a4d9');
 myChart.setLineColor('#C71112');
 myChart.setTitle('price trend');
 myChart.setTitleColor('#383838');
 myChart.setGraphExtend(true);
 myChart.setGridColor('#38a4d9');
 myChart.setSize(616, 321);
 myChart.setAxisPaddingLeft(140);
 myChart.setAxisPaddingRight(140);
 myChart.setAxisPaddingTop(60);
 myChart.setAxisPaddingBottom(45);
 myChart.setTextPaddingLeft(105);
 myChart.setTextPaddingBottom(12);
 myChart.setBackgroundImage('chart_bg.jpg');
 myChart.draw();
</script>
      这样运行你的页面,一个漂亮的图表就出现了,很简单吧。
      测试一下发现,x轴标签好像只能用数据,不能用其他格式的数字,虽然他的论坛中说new array(['tttt',1],['zzzz',2],..这样可以,但是我运行一直出错,后来因为发现了更好的图表控件,也就没有再深究了。
      他支持从xml文件中读取数据,看上去满诱人的。
                var myChart = new JSChart('graph', 'bar');
                myChart.setDataXML("data.xml");
                myChart.draw();
      很方便吧,可是一使用又发现了问题,我动态生成xml文件就不可以,比如mychar.setdatexml("getxml.aspx")这样就不行。为了达到从数据库中读取数据的目的,就只能在<script>脚本中嵌入程序语句读取数据,然后填充我们的array
    myData[<%=i%>]=new Array(<%=i*10%>,<%=j%>);


总结一下,初次接触感觉两个地方不是很满意:
1.不支持中文;
2.x轴不支持非数字格式
3.获取动态数据比较麻烦;

4.如果是图表类型是pie,数据一多的话,IE容易死掉.