首頁 > 開發者 > 網站開發

JQuery中jsCharts圖表外掛程式（十）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

一：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.zip3.使用入門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傳遞資料
<scripttype="text/javascript">
var myData = newArray([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 notavailable or used for SEO purposes</div>    </div>    </form></body></html>

 

效果：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

顯示中文：

JQuery中jsCharts圖表外掛程式（十）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More