标签:
一: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