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>
浙公网安备 33010602011771号