首页 > 代码库 > JQuery中jsCharts图表插件（十）

JQuery中jsCharts图表插件（十）

2024-08-13 20:33:14   224人阅读

一：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="http://www.mamicode.com/jscharts.js"></script> 。
4 添加容器：在代码中添加<div id="graph">正在生产图表...</div>
5 添加图表所需数据
 
 
方法一：使用json传递数据
<scripttype="text/javascript">
var myData = http://www.mamicode.com/new>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="http://www.mamicode.com/20"/>
<data unit="15" value="http://www.mamicode.com/10"/>
<data unit="20" value="http://www.mamicode.com/30"/>
<data unit="25" value="http://www.mamicode.com/10"/>
<data unit="30"value="http://www.mamicode.com/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="http://www.mamicode.com/Scripts/jquery-1.2.6.js" type="text/javascript"></script>    <script src="http://www.mamicode.com/Scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>    <script src="http://www.mamicode.com/JS-Charts_demo/sources/jscharts.js" type="text/javascript"></script>    <script type="text/javascript">        $(document).ready(function() {            TwoLine();        })            function line() {                var myData = http://www.mamicode.com/new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);"form1" runat="server">    <div>    <div id="chartcontainer">This is just a replacement in case Javascript is notavailable or used for SEO purposes</div>    </div>    </form></body></html>

 

效果：

 

 

技术分享

 

 

 

技术分享

 

 

 

 

技术分享

 

 

技术分享

 

 

 

技术分享

 

 

 

 

 

 

 

 

 

 

 

 

技术分享

 

 

 

 

显示中文：

技术分享

JQuery中jsCharts图表插件（十）


联系
我们