轻量级图形报表插件JSCharts

所属分类:UI-图表

 46397  364  查看评论 (12)
分享到微信朋友圈
X
轻量级图形报表插件JSCharts ie兼容8

2017-05-09更新:改为无logo版


JScharts使用指南

1.下载JScharts库

从官网下载JScharts库,我们使用的是压缩包里面的jscharts.js文件。它大约150KB。

2. 使用JScharts库

在网页文件(如.html或.jsp)包含JScharts库。

<scripttype="text/javascript" src="js/jscharts.js"></script>

3. 定义容器

要在网页文件上显示JScharts生成的图像,需要把此图像放入网页容器。此网页容器我们通常用<div>标签来定义,而且必须强制性地为此DIV元素指定唯一的ID值。比如:

<divid="chartcontainer">This is just a replacement in case Javascriptis not available or used for SEO purposes</div>

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

4. 显示JScharts图像

下面,我们需要写少量代码来显示一个线性图。首先要准备好图像所需的数据,我们可以用JavaScript数组来提供数据,数组中的每个元素都是由2个元素所组成。

代码如下:

<scripttype="text/javascript">
    varmyData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);
    varmyChart = new JSChart('chart_container', 'line');
    myChart.setDataArray(myData);
    myChart.draw();
</script>

完整的代码如下:

[html] view plaincopyprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title>JScharts Test</title>  
 </head>  
 <body>  
<script type="text/javascript" src="sources/jscharts.js"></script>  
<div id="chartcontainer">This is just a replacement in case Javascript is not available or used for SEO purposes</div>  
<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>  
 </body>  
</html>

5. 在浏览器查看结果

1)线性图

用浏览器查看上面的文件,结果如下:

2)柱状图

将代码:

varmyData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);
varmyChart = new JSChart('chartcontainer', 'line');

改成:

varmyData = new Array(['Unit 1',20], ['Unit 2',10], ['Unit 3',30], ['Unit 4',10],['Unit 5',5]);
varmyChart = new JSChart('chartcontainer', 'bar');

则显示如下:

3)饼状图

将代码:

varmyChart = new JSChart('chartcontainer', 'bar');

改为:

varmyChart = new JSChart('chartcontainer', 'pie');

则显示如下:

6. JScharts数据来源

JScharts图像所需的数据,除了来自于JavaScript数组,还可以来源于JSON文件或XML文件。

1)JavaScript数组提供数据的代码:

myChart.setDataArray(myData);

2)JSON文件提供数据的代码:

myChart.setDataJSON(‘data.json’);
data.json文件的内容如下:
[javascript] view plaincopyprint?
{  
    "JSChart" : {  
        "datasets" : [  
        {  
        "type" : "pie",  
        "data" : [  
        {  
        "unit" : "Unit_1",  
        "value" : "20"  
        },  
        {  
        "unit" : "Unit_2",  
        "value" : "10"  
        },  
        {  
        "unit" : "Unit_3",  
        "value" : "30"  
        },  
        {  
        "unit" : "Unit_4",  
        "value" : "10"  
        },  
        {  
        "unit" : "Unit_5",  
        "value" : "5"  
        }  
        ]  
        }  
        ]  
    }  
}


3)XML文件提供数据的代码:

myChart.setDataXML(‘data.xml’);

data.xml文件的内容如下:

[html] view plaincopyprint?
<?xml version="1.0"?>  
<JSChart>  
    <dataset type="pie">  
        <data unit="Unit_1" value="20"/>  
        <data unit="Unit_2" value="10"/>  
        <data unit="Unit_3" value="30"/>  
        <data unit="Unit_4" value="10"/>  
        <data unit="Unit_5" value="5"/>  
    </dataset>  
</JSChart>


相关插件-图表

jquery-html5关系图

jquery-html关系图-介绍人物关系
  图表
 125491  461

动态数据表格插件ZBTable(原创)

能够根据后台传来的JSON数据动态创建的基本功能的JQuery表格插件
  图表
 28914  299

D3&jquery多功能图表(原创)

基于D3的多功能图表。可添加描述,收缩节点,滚轮缩放整图尺寸
  图表
 17421  213

ets实现汽车动态仪表盘

通过ets实现汽车动态仪表盘,包括速度,转速等的实时数据更新
  图表
 16938  207

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    思之雨之 0
    2018/8/15 10:08:14
    tab切换不同的图会被压缩嘛。大佬们 回复
    忧离伤 0
    2017/9/24 15:41:36
    请问 3D 柱状和饼状图怎么写的JS代码?  在哪看文档啊, 我需要那个3D的图,谢谢 回复
    thero 0
    2017/8/14 16:22:25
    一行显示两个咋做啊@#### 回复
    A 0
    2017/5/9 19:49:39

    差评,那个Logo设置的太流氓了,因为Logo的问题,这个插件被Pass了,白花我的币

        areyouOk0
        2017/5/9 21:15:15

        重下,以经是无logo版本啦

        A0
        2017/5/10 11:10:18

        我又花了一个币下载了,可是Logo问题依然存在,只是在IE11版本没有Logo了,在Chrome浏览器下依然存在,其它浏览器没测

        A0
        2017/5/10 12:16:17
        Chrome浏览器也好了,也没有Logo了,可能是浏览器缓存的原因
    回复
    A 0
    2017/5/9 19:05:09

    左上角那个logo怎么去掉啊?作者能否回答一下,谢谢

    回复
    handsome-boy-is 0
    2017/4/13 12:04:46

    在右上角的logo能去的?想直接去掉的那种

    回复
    自怜 0
    2017/3/17 10:45:03
    小小帽子 0
    2016/11/29 15:11:56
    道是 0
    2016/6/1 12:06:44
    想不通,为什么从第一个开始的。折线图,可以从第二个空格开始么?? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复