你的位置:首页 > ASP.net教程

[ASP.net教程]JsCharts图表的介绍和简单使用


一、JSCharts介绍

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

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();
    
    //饼状图(    var myChart3 = new JSChart('chartcontainer3', 'pie');
    myChart3.setData    myChart3.draw();
    
    //饼状图(json导入数据)
    var myChart4 = new JSChart('chartcontainer4', 'pie');
    myChart4.setDataJSON('js/jschart_data.json');
    myChart4.draw();
</script>  
 </body>  
</html>


 

运行后的效果图:

        曲线图(如上)

      饼形图(如上)

    饼形图(如上,