Js Chars应用
近两日学习Js Chars,和大家分享一下我的心得，也希望大家将我不明白的错误的地方帮我改正过来。
JS Charts 是一个用于在客户端完整地绘制图表的JavaScript 脚本类库。无需使用额外的插件,只需要包含我们的脚本文件，使用XML、JSON 或者JavaScript 数组传递图表数据，这样就可以绘制出图形了。JS Charts 允许你绘制不同类型的表比如条形图，饼状图和简单的线形图，以及高度自定义的图表。
使用JS Charts 只需要包含一个JavaScript 文件，该文件中包含了JS Charts 的核心代码和用于兼容不同浏览器效果的画布函数。
例1.1 示例如何在你自己页面中的<head>区域中引用JS Charts 脚本文件：
<script type="text/javascript" src="jscharts.js"></script>
jscharts.js 文件包含了JS Charts 的主要图形类库，和用以简单地绘制图表，以及必要的兼容不同的浏览器效果的函数（兼容Firefox, Opera or Safari)
第二步：准备一个保存图表的容器，可以使用一个<DIV>标签，必须为DIV 设置一个唯一的ID 标记。
例1.2 容器示例：
<div id="chartcontainer"></div>
图表容器的内容将被JS Charts 图形替换。
接下来，用少量的JavaScript 代码绘制你的第一个图形。首先，准备图形数据，用一个数组包含其它的数组，每个被包含的数组具有两个元素。每一个具有两个元素的数组将描绘出线形图上的一个点，或者条形图上的一个条，或者饼状图的一个扇形块。
例1.3 一个简单的线形图：这些数据保存在名为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.初始准备工作：
使用JS Charts 只需要包含一个JavaScript 文件，该文件中包含了JS Charts 的核心代码
和用于兼容不同浏览器效果的画布函数。
例1.1 示例如何在你自己页面中的<head>区域中引用JS Charts 脚本文件：
<script type="text/javascript" src="jscharts.js"></script>
jscharts.js 文件包含了JS Charts 的主要图形类库，和用以简单地绘制图表，以及必要的
兼容不同的浏览器效果的函数（兼容Firefox, Opera or Safari 浏览器）。
2.图表容器：
第二步：准备一个保存图表的容器，可以使用一个<DIV>标签，必须为DIV 设置一个
唯一的ID 标记。
例1.2 容器示例：
<div id="chartcontainer"></div>
图表容器的内容将被JS Charts 图形替换。
3.绘制第一个图形
接下来，用少量的JavaScript 代码绘制你的第一个图形。首先，准备图形数据，用一个
数组包含其它的数组，每个被包含的数组具有两个元素。每一个具有两个元素的数组将描绘
出线形图上的一个点，或者条形图上的一个条，或者饼状图的一个扇形块。
例1.3 一个简单的线形图：这些数据保存在名为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>第二行代码是为图形构造函数的初始化提供图形类型（可能的取值有线形line、条形bar、饼状图pie）和图形容器ID 名称。这里的图形类型会被XML 或者JSON 文件中设置的图形类型重写。
例1.4 条形图：使用数组传递图形数据
<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>例1.5 绘制饼状图，使用XML 文件传递图形数据
<script type="text/javascript">
var myChart = new JSChart('chartcontainer', 'pie');
myChart.setDataXML('data.xml');
myChart.draw();
</script>例1.6 绘制饼状图，使用JSON 文件传递图形数据
<script type="text/javascript">
var myChart = new JSChart('chartcontainer', 'pie');
myChart.setDataJSON('data.json');
myChart.draw();
</script>在上面的两个例子分别绘制了条形图和饼状图。最后的例子中，分别使用了XML 和JSON 文件为JSChart 对象传递了图像数据。XML 和JSON 文件必须遵循一个准确的格式：
例1.7 XML 文件示例
<?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>
例1.8 JSON 文件示例
{
"JSChart" : {
"datasets" : [
{
"type" : "pie",
"data" : [
{
"unit" : "Unit_1",
"value" : "20"
},
{
"unit" : "Unit_2",
"value" : "10"
},
{
"unit" : "Unit_3",
"value" : "30"
},
9
{
"unit" : "Unit_4",
"value" : "10"
},
{
"unit" : "Unit_5",
"value" : "5"
}
]
}
]
}
}主节点必须命名为JSChart，子节点可以是dataset、colorset 和optionset 三个值。在上面的例子中仅使用了dataset,因此必须是一个子节点。datase 必须定义图表类型，同时必须包含所有的图形数据。unit 和value 的值必须类似前文例子中数格式数据保持一致。Colorset和optionset 的细节将在自定义图形章节（Customization chapter）介绍。
<html>
<head>
<title>JSChart 测试</title>
<script type="text/javascript" src="jscharts.js"></script>
</head>
<body>
<div id="graph">Loading graph...</div>
<script type="text/javascript">
var myChart = new JSChart('graph', 'bar');
myChart.setDataXML("data.xml");
myChart.draw();
function callback() {
alert('User click');
}
</script>
</body>
</html>
Data.xml
<?xml version="1.0"?>
<JSChart>
<dataset type="pie">
<data unit="A" value="40"/>
<data unit="B" value="16"/>
<data unit="C" value="20"/>
<data unit="D" value="10"/>
<data unit="E" value="10"/>
<data unit="F" value="4"/>
</dataset>
<colorset>
<color value="#99CDFB"/>
<color value="#3366FB"/>
<color value="#0000FA"/>
<color value="#F8CC00"/>
<color value="#F89900"/>
<color value="#F76600"/>
</colorset>
<optionset>
<option set="setSize" value="600, 300"/>
<option set="setTitle" value="'Phd Reference Chart'"/>
<option set="setTitleFontFamily" value="'Times New Roman'"/>
<option set="setTitleFontSize" value="14"/>
<option set="setTitleColor" value="'#0F0F0F'"/>
<option set="setPieRadius" value="95"/>
<option set="setPieValuesColor" value="'#FFFFFF'"/>
<option set="setPieValuesFontSize" value="9"/>
<option set="setPiePosition" value="180, 165"/>
<option set="setShowXValues" value="false"/>
<option set="setLegend" value="'#99CDFB', 'Papers where authors
found'"/>
<option set="setLegend" value="'#3366FB', 'Papers which cite from
other articles'"/>
<option set="setLegend" value="'#0000FA', 'Papers which cite from
news'"/>
<option set="setLegend" value="'#F8CC00', 'Papers which lack
crucial'"/>
<option set="setLegend" value="'#F89900', 'Papers with different
conclusion'"/>
<option set="setLegend" value="'#F76600', 'Papers with useful
information'"/>
<option set="setLegendShow" value="true"/>
<option set="setLegendFontFamily" value="'Times New Roman'"/>
<option set="setLegendFontSize" value="10"/>
<option set="setLegendPosition" value="350, 120"/>
<option set="setPieAngle" value="30"/>
<option set="set3D" value="true"/>
</optionset>
</JSChart>但是，我自己有一个问题，百思不得其解。我完全按照上面的做了，可是下面的例子中Jschars.js一直出现异常，求解答啊！
<html><head><mata http-equiv="Content-Type" content="text/html;charset=utf-8"><title>JSChart 测试</title><script type="text/javascript" src="jscharts.js"></script></head><body><div id="graph">Loading graph...</div><script type="text/javascript">var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30,
5],[35,20]);var myChart = new JSChart('graph', 'line');myChart.setDataArray(myData);myChart.draw();</script></body>
</html>转载于:https://www.cnblogs.com/caozhenhua/archive/2012/07/22/2603738.html
Js Chars应用相关推荐
- Vue源码流程图(函数名与源码对应)
这里写目录标题 概览 1. 变化侦查 1.1 Observer流程图 2. vdom虚拟DOM 2.1 创建节点createElm 2.2 更新节点patchVnode 2.3 更新子节点 updat ...
- js生成随机数函数，倒计时函数
生成xxxx-xxxx-xxxx-xxxx形式的随机数 function randomString(n) {let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmn ...
- js 监听 安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输 使用场景 类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息 技术原理 跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...
- 翻译连载 | JavaScript轻量级函数式编程-第4章:组合函数 |《你不知道的JS》姊妹篇...
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- helper.js(20170612)
//***************************************参数辅助对象***************************************///公共参数辅助对象 va ...
- js 获取sessionid_百战卓越班学员学习经验分享：页面js代码
点击页面产生的信息经过nginx保存到本地文件 页面js代码 这段js代码是在进入页面的时候就开始执行,模拟用户进入页面产生的信息,它的入口是autoLoad方法 (function() {var C ...
- 让Visual Studio 也支持JS代码折叠 [ Visual Studio | #region | #endregion ]
前言 Visual Studio的代码折叠功能非常好用,#region #endregion 这个词连搜狗的词库里面都出现了(不含'#'号),可见使用频率很高,但是他不支持js的代码折叠 : ( 最近 ...
- php和python性能-Node.js与PHP、Python的字符处理性能对比
测试用例分为用函数和类来进行一个大字符串的字符逐一读取. 测试代码 Node.js 函数 var fs = require("fs"); var content = fs.read ...
- 前端知识点总结——JS高级（持续更新中）
前端知识点总结--JS高级(持续更新中) 1.字符串 什么是: 连续存储多个字符的字符数组 相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...
最新文章
- Git安装配置（Linux）
- Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
- XVII Open Cup named after E.V. Pankratiev. GP of Tatarstan
- TCP通信的服务器端代码实现
- java随机数排序算法_理解快速排序算法
- dedeCMS如何进行关键词过滤替换和屏蔽非法词汇？
- 杭电多校HDU 6601 Keen On Everything But Triangle（主席树）题解
- prototype.js学习（3）函数绑定
- MATLAB深度学习网络包 Alexnet / Googlenet / Vgg19
- 企业IT架构的发展历程
- ZigBee-CC2530单片机 - LED呼吸灯
- html如何让单元格超链接,怎样使超链接引用单元格时,显示引用的单元格 – 手机爱问...
- 新更新....llq原创考试第二题
- linux 限制单个ip流量,centos 的单ip流量控制－CentOS下利用iptables限速及限制每IP连接数...
- 重构改善既有代码设计
- 个人电子邮箱如何在网页进行登录？
- STM32连YL69土壤湿度传感器以及内部温度传感器采集数据并在LCD上显示
- linux在指定行添加内容,linux下利用shell在指定的行添加内容的方法
- 个人所得税缴纳税率是多少
- 无人便利店和无人售货机的区别在哪