JSCharts 免费的网页统计图表生成 JavaScript 插件 - 资源分享

JSCharts 免费的网页统计图表生成 JavaScript 插件

发布于 2018-04-13 字数 2306 浏览 2278 评论 0

JScharts 是一个用来在浏览器上直接绘制图表的 JavaScript 工具包,JScharts 支持柱状图、圆饼图以及简单的曲线图。直接将这个库引入进网页,然后从 XML 文件或 JavaScript 数组变量调用数据。生成的图表可保存为 PNG 格式,兼容所有主要浏览器。

JSCharts 免费的网页统计图表生成 JavaScript 插件

安装启用

1、只有一个 JavaScript 文件被包括在内,它主要包含代码和 Canvas 的功能与 Internet Explorer 兼容。

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

包括脚本文件到你的页面 <head>,jscharts.js 包含主要的图表插件,代码很容易画文本在图表和帆布的 Internet Explorer 所需的功能,在 Firefox、Opera 和 Safari 来实现。

2、Container

第二步是准备容器将举行一个图表。这可以是一个简单的 <div> 标签。它是强制性的标签有一个独特的 ID 集。

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

容器的例子容器的内容将被 jscharts。

3、First chart

接下来编写几行 JavaScript 代码是你的第一个图需要。 首先,图表数据准备,一个简单的数组包含其他 阵列,每两个元素。这两个元素的数组 代表一个线图形中的一个点,或者一条条形图,或 在一个饼图饼节。 该数据存储在 MYDATA 变量如下。

<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>

简单的线图

  1. 第二行初始化图所提供的容器的 ID、图表类型(可能值线,条形图和饼图)。
  2. 第三线介绍数据的 JSChart 对象。
  3. 最后第四行执行图的绘制。
<script type="text/javascript">
  var myData = new Array(['unit', 20], ['unit two', 10], ['unit three', 30], ['other unit', 10], ['last unit', 30]);
  var myChart = new JSChart('chartcontainer', 'bar');
  myChart.setDataArray(myData);
  myChart.draw();
</script>

示例下载:JSCharts3_demo

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论