一：1.jsCharts图表插件
注意：从官方下来的例子都没指定页面编码，在这种情况下，浏览器就会使用默认设置中文编码：GB2312，GBK等；导致无法执行。
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″>，也就是指定页面编码【只要不是中文编码就行】
2.下载地址：
<%@ 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>
效果：
显示中文：
原文：http://www.cnblogs.com/sunliyuan/p/5883298.html