一：1.jsCharts图表插件
注意：从官方下来的例子都没指定页面编码，在这种情况下，浏览器就会使用默认设置中文编码：GB2312，GBK等；导致无法执行。
请在html代码中的<head></head>标签对里加入
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″>，也就是指定页面编码【只要不是中文编码就行】
2.下载地址：
官方地址：http://www.jumpeyecomponents.com/JavaScript-Components/Charting/JS-Charts-245/get/JS-Charts_demo.zip (需要注册)
海外地址：http://www.hostingreviewcenter.com/files/JS-Charts_demo.zip
3.使用入门
1 解压：将压缩包中的jscharts.js解压到网站的目录中
2 编码转换：在html代码中的<head></head>标签对里加入<meta http-equiv="content-type" content="text/html;charset=utf-8">,否则会出错。
3 引入js：在代码中添加<script type="text/javascript" src="jscharts.js"></script> 。
4 添加容器：在代码中添加<div id="graph">正在生产图表...</div>
5 添加图表所需数据
方法一：使用json传递数据
<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>
方法二：使用外部xml传递数据
<script type="text/javascript">
var myChart = new JSChart(‘graph‘, ‘line‘);
myChart.setDataXML("data.xml");
myChart.draw();
</script>
xml的标准格式
<?xml version="1.0"?>
<JSChart>
<dataset type="line">
<data unit="10" value="20"/>
<data unit="15" value="10"/>
<data unit="20" value="30"/>
<data unit="25" value="10"/>
<data unit="30"
value="5"/>
</dataset>
</JSChart>
最容易出错的地方是中文的使用，需要调整各个文件的编码。
二：line图表
代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>
<script src="JS-Charts_demo/sources/jscharts.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
TwoLine();
})
function line() {
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();
}
function pie() {
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();
}
function bar_xml() {
var myChart = new JSChart(‘chartcontainer‘, ‘bar‘);
myChart.setDataXML(‘xml/data_bar.xml‘);
myChart.draw();
}
function line_xml() {
var myChart = new JSChart(‘chartcontainer‘, ‘line‘);
myChart.setDataXML(‘xml/data_line.xml‘);
myChart.draw();
}
function pie_xml() {
var myChart = new JSChart(‘chartcontainer‘, ‘pie‘);
myChart.setDataXML(‘xml/data_pie.xml‘);
myChart.draw();
}
function TwoLine() {
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myData2 = new Array([10, 10], [15, 5], [25, 25], [30, 20]);
var myChart = new JSChart(‘chartcontainer‘, ‘line‘);
myChart.setDataArray(myData);
myChart.setDataArray(myData2);
myChart.draw();
}
function TwoLine_xml() {
var myChart = new JSChart(‘chartcontainer‘, ‘line‘);
myChart.setDataXML(‘xml/data_multi_line.xml‘);
myChart.draw();
}
function customerizeChart1() {
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myChart = new JSChart(‘chartcontainer‘, ‘line‘);
myChart.setDataArray(myData);//设置数据
myChart.setBackgroundColor(‘#efe‘);//设置图表背景
myChart.setAxisNameX(‘Custom X Axis Name‘); //x轴文字描述
myChart.setAxisNameY(‘Y Axis‘);//y轴文字描述
myChart.setSize(400,300); //设置图表大小
myChart.setTitle(‘My Chart Title‘);//设置图表标题
myChart.setTitleColor(‘#000‘);//设置文字的颜色
myChart.setTitleFontSize(20); //设置文字的大小
myChart.draw();
}
function customerizeChart2() {
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myData2 = new Array([10, 10], [15, 5], [25, 25], [30, 20]);
var myChart = new JSChart(‘chartcontainer‘, ‘line‘);
myChart.setDataArray(myData, ‘first line‘); //给myData数据线起别名：first line
myChart.setDataArray(myData2, ‘second line‘); //给myData2数据线起别名：second line
myChart.setBackgroundColor(‘#efe‘);
myChart.setAxisNameX(‘Custom X Axis Name‘);
myChart.setAxisNameY(‘Y Axis‘);
myChart.setLineColor(‘#ff0f0f‘, ‘first line‘);//设置线的颜色
myChart.setLineWidth(5, ‘second line‘);//设置线的宽度
myChart.setSize(500, 400);
myChart.setTitle(‘My Chart Title‘);
myChart.setTitleColor(‘#5555AA‘);
myChart.setTitleFontSize(10);
myChart.setTooltip([15, ‘My Tooltip‘, ‘first line‘]);//设置提示
myChart.draw();
}
function customerizeChart_xml1() {
var myChart = new JSChart(‘chartcontainer‘, ‘line‘);
myChart.setDataXML(‘xml/data_customerize_line1.xml‘);
myChart.draw();
}
function customerizeChart_xml2() {
var myChart = new JSChart(‘chartcontainer‘, ‘line‘);
myChart.setDataXML(‘xml/data_customerize_line2.xml‘);
myChart.draw();
}
function colorizeBar1() {
var myData = new Array([‘one‘, 20], [‘two‘, 10], [‘three‘, 30], [‘four‘, 10], [‘five‘, 5],[‘six‘, 40]);
var myChart = new JSChart(‘chartcontainer‘, ‘bar‘);
myChart.setDataArray(myData);
var myColors = new Array(‘#0f0‘, ‘#ff0000‘, ‘#00f‘, ‘#ff0‘, ‘#00ffff‘,‘#ccc‘);
myChart.colorizeBars(myColors);
myChart.draw();
}
function colorizeBar_xml1() {
var myChart = new JSChart(‘chartcontainer‘, ‘bar‘);
myChart.setDataXML(‘xml/data_colorize_bar.xml‘);
myChart.draw();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="chartcontainer">This is just a replacement in case Javascript is not
available or used for SEO purposes</div>
</div>
</form>
</body>
</html>
效果：
显示中文：