不可否认,虽然是简单了点,但是出来的效果确实很不错,纯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容易死掉.