JsCharts图表的介绍和简单使用

最新推荐文章于 2021-12-05 13:50:58 发布

weixin_34319111

最新推荐文章于 2021-12-05 13:50:58 发布

阅读量116

点赞数

文章标签： javascript json ViewUI

一、JSCharts介绍

JScharts是一个用于在浏览器直接绘制图表的javascript工具包。JScharts支持柱状图、圆饼图以及线性图，可以直接将这个图插入网页，

JScharts图的数据可以来源于XML文件、JSON文件或 JavaScript数组变量。JScharts兼容所有主流的浏览器，且使用时无需任何服务器端的

插件或模块，是纯JavaScript组件，免费(含水印)。

二、JsChart的特性

1. 支持3D饼状图或3D柱状图

2. 多系列柱状图

3. 水平柱状图

4. 线性图支持动画显示

5. 新的自定义方法

三、JSCharts的使用指南

1、下载Js库，从官网下载，使用的是jscharts.js文件

2、使用js库，引用<script type="text/javascript" src="js/jscharts.js">

3、定义容器，<div id="myjschart">this is context</div>

注意：此DIV容器内的内容都会被JScharts图像所替代

四、JSCharts的使用

1、曲线图

2、柱状图

3、饼状图

例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JScharts Test</title>
</head>
<script type="text/javascript" src="js/jscharts.js"></script>
<body>
<div id="chartcontainer">这只是一个替换内容</div><br/>
<div id="chartcontainer1">这只是一个替换内容</div><br/>
<div id="chartcontainer2">这只是一个替换内容</div><br/>
<div id="chartcontainer3">这只是一个替换内容</div><br/>
<div id="chartcontainer4">这只是一个替换内容</div><br/>
<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();

   //柱状图
   var myData1 = new Array(['Unit 1',20], ['Unit 2',10], ['Unit 3',30], ['Unit 4',10],['Unit 5',5]);
   var myChart1 = new JSChart('chartcontainer1', 'bar');
   myChart1.setDataArray(myData1);
   myChart1.draw();

   //饼状图
   var myData2 = new Array(['Unit 1',20], ['Unit 2',10], ['Unit 3',30], ['Unit 4',10],['Unit 5',5],['Unit 6',15],['Unit 7',5]);
   var myChart2 = new JSChart('chartcontainer2', 'pie');
   myChart2.setDataArray(myData2);
   myChart2.draw();

   //饼状图（xml导入数据）
   var myChart3 = new JSChart('chartcontainer3', 'pie');
   myChart3.setDataXML('js/jschart_data.xml');
   myChart3.draw();

   //饼状图（json导入数据）
   var myChart4 = new JSChart('chartcontainer4', 'pie');
   myChart4.setDataJSON('js/jschart_data.json');
   myChart4.draw();
</script>
</body>
</html>

Xml和Json的内容

运行后的效果图：

　　　　　　　　曲线图（如上）

　　　　　　柱状图（如上）

　　　　　　饼形图（如上）

　　　　饼形图（如上，XML格式）

weixin_34319111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JsCharts图表的介绍和简单使用

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

扫一扫