今天来跟大家分享这个jsCharts的使用,我最近在做一个项目,需要做图,所以就用了jscharts的插件,但是第一次用,所以也遇到一些问题:
1.jscharts怎么作图:
先导入我所需要的jscharts.js文件:
<script type="text/javascript" src="js/jscharts.js"></script>
然后代码如下
var myData = new Array([30,50], [15,10], [20,30], [25,80], [30,5]);
var myChart = new JSChart('chartcontainer', 'line');
myChart.setTitle("我的图表标题");
myChart.setAxisNameX("X轴名字");
myChart.setAxisNameY("Y轴名字");
myChart.setDataArray(myData);
myChart.draw();
就可以做出我想要的图形了。
但是问题来了,我不想要他左上角的图标,觉得页面不好看,就去网上搜索,发现一些去除图标的方法
发现了很多这种,但是我试过很多次都没用,可能是因为我的jscharts的版本原因吧,我是昨天在jscharts的官网下载的免费插件,然后又找到了一种方法(来自http://blog.csdn.net/itchiang/article/details/9049147)
发现这种方法是可行的,但是奈何找这句代码找的眼睛疼,后来就用的word自带的搜索功能,搜索到,然后删除了这句代码,再次运行的时候图标就不见了
现在就分享给大家我改好后的jscharts.js文件,以便方便大家的使用,给大家一个百度链接的地址,如果地址失效请联系我也可以
链接:http://pan.baidu.com/s/1o8jU3Y6 密码:zu0c
当然jscharts还有很多其他的用法,不止可以画折线图还可以画柱状图,饼状图等。主需要更改代码中的var myChart = new JSChart('chartcontainer', 'line');就可以了;
一、柱状图
varmyChart = new JSChart('chartcontainer', 'bar');
二、饼状图
varmyChart = new JSChart('chartcontainer', 'pie');
jscharts还可以读取json文件和xml文件
一:使用json传递数据
<script type="text/javascript">
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataArray(myData);
myChart.draw();
</script>
二:使用外部xml传递数据
<script type="text/javascript">
var myChart = new JSChart('graph', 'line');
myChart.setDataXML("data.xml");
myChart.draw();
</script>
好了就分享这些吧,谢谢!