Js Chars应用
近兩日學習Js Chars,和大家分享一下我的心得，也希望大家將我不明白的錯誤的地方幫我改正過來。
一 What is jsChartsJS Charts 是一個用于在客戶端完整地繪制圖表的JavaScript 腳本類庫。無需使用額外的插件,只需要包含我們的腳本文件，使用XML、JSON 或者JavaScript 數組傳遞圖表數據，這樣就可以繪制出圖形了。JS Charts 允許你繪制不同類型的表比如條形圖，餅狀圖和簡單的線形圖，以及高度自定義的圖表。
注意：從官方下來的例子都沒指定頁面編碼，在這種情況下，瀏覽器就會使用默認設置中文編碼：GB2312，GBK等；導致無法執行。 請在html代碼中的<head></head>標簽對里加入<meta http-equiv=”content-type” content=text/html;charset=utf-8″>，也就是指定頁面編碼【只要不是中文編碼就行】。 下載地址：http://www.jscharts.com/ 二 How to use 1.初始準備工作：使用JS Charts 只需要包含一個JavaScript 文件，該文件中包含了JS Charts 的核心代碼和用于兼容不同瀏覽器效果的畫布函數。
例1.1 示例如何在你自己頁面中的<head>區域中引用JS Charts 腳本文件：
<script type="text/javascript" src="jscharts.js"></script>
jscharts.js 文件包含了JS Charts 的主要圖形類庫，和用以簡單地繪制圖表，以及必要的兼容不同的瀏覽器效果的函數（兼容Firefox, Opera or Safari) 2.圖表容器：
第二步：準備一個保存圖表的容器，可以使用一個<DIV>標簽，必須為DIV 設置一個唯一的ID 標記。
例1.2 容器示例：
<div id="chartcontainer"></div>
圖表容器的內容將被JS Charts 圖形替換。 3.繪制第一個圖形
接下來，用少量的JavaScript 代碼繪制你的第一個圖形。首先，準備圖形數據，用一個數組包含其它的數組，每個被包含的數組具有兩個元素。每一個具有兩個元素的數組將描繪出線形圖上的一個點，或者條形圖上的一個條，或者餅狀圖的一個扇形塊。
例1.3 一個簡單的線形圖：這些數據保存在名為myData 的可變數組中。 <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>
一、使用方法
1.初始準備工作：
使用JS Charts 只需要包含一個JavaScript 文件，該文件中包含了JS Charts 的核心代碼
和用于兼容不同瀏覽器效果的畫布函數。
例1.1 示例如何在你自己頁面中的<head>區域中引用JS Charts 腳本文件：
<script type="text/javascript" src="jscharts.js"></script>
jscharts.js 文件包含了JS Charts 的主要圖形類庫，和用以簡單地繪制圖表，以及必要的
兼容不同的瀏覽器效果的函數（兼容Firefox, Opera or Safari 瀏覽器）。
2.圖表容器：
第二步：準備一個保存圖表的容器，可以使用一個<DIV>標簽，必須為DIV 設置一個
唯一的ID 標記。
例1.2 容器示例：
<div id="chartcontainer"></div>
圖表容器的內容將被JS Charts 圖形替換。
3.繪制第一個圖形
接下來，用少量的JavaScript 代碼繪制你的第一個圖形。首先，準備圖形數據，用一個
數組包含其它的數組，每個被包含的數組具有兩個元素。每一個具有兩個元素的數組將描繪
出線形圖上的一個點，或者條形圖上的一個條，或者餅狀圖的一個扇形塊。
例1.3 一個簡單的線形圖：這些數據保存在名為myData 的可變數組中。
?
第二行代碼是為圖形構造函數的初始化提供圖形類型（可能的取值有線形line、條形bar、餅狀圖pie）和圖形容器ID 名稱。這里的圖形類型會被XML 或者JSON 文件中設置的圖形類型重寫。
例1.4 條形圖：使用數組傳遞圖形數據
<script type="text/javascript"> 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(); </script>例1.5 繪制餅狀圖，使用XML 文件傳遞圖形數據
<script type="text/javascript"> var myChart = new JSChart('chartcontainer', 'pie'); myChart.setDataXML('data.xml'); myChart.draw(); </script>例1.6 繪制餅狀圖，使用JSON 文件傳遞圖形數據
<script type="text/javascript"> var myChart = new JSChart('chartcontainer', 'pie'); myChart.setDataJSON('data.json'); myChart.draw(); </script>在上面的兩個例子分別繪制了條形圖和餅狀圖。最后的例子中，分別使用了XML 和JSON 文件為JSChart 對象傳遞了圖像數據。XML 和JSON 文件必須遵循一個準確的格式：
例1.7 XML 文件示例
<?xml version="1.0"?> <JSChart> <dataset type="pie"> <data unit="Unit_1" value="20"/> <data unit="Unit_2" value="10"/> <data unit="Unit_3" value="30"/> <data unit="Unit_4" value="10"/> <data unit="Unit_5" value="5"/> </dataset> </JSChart>例1.8 JSON 文件示例
{ "JSChart" : { "datasets" : [ { "type" : "pie", "data" : [ { "unit" : "Unit_1", "value" : "20" }, { "unit" : "Unit_2", "value" : "10" }, { "unit" : "Unit_3", "value" : "30" }, 9 { "unit" : "Unit_4", "value" : "10" }, { "unit" : "Unit_5", "value" : "5" } ] } ] } }主節點必須命名為JSChart，子節點可以是dataset、colorset 和optionset 三個值。在上面的例子中僅使用了dataset,因此必須是一個子節點。datase 必須定義圖表類型，同時必須包含所有的圖形數據。unit 和value 的值必須類似前文例子中數格式數據保持一致。Colorset和optionset 的細節將在自定義圖形章節（Customization chapter）介紹。
下面是一個完整的繪制餅狀圖的代碼: <html> <head> <title>JSChart 測試</title> <script type="text/javascript" src="jscharts.js"></script> </head> <body> <div id="graph">Loading graph...</div> <script type="text/javascript"> var myChart = new JSChart('graph', 'bar'); myChart.setDataXML("data.xml"); myChart.draw(); function callback() { alert('User click'); } </script> </body> </html> Data.xml <?xml version="1.0"?> <JSChart> <dataset type="pie"> <data unit="A" value="40"/> <data unit="B" value="16"/> <data unit="C" value="20"/> <data unit="D" value="10"/> <data unit="E" value="10"/> <data unit="F" value="4"/> </dataset> <colorset> <color value="#99CDFB"/> <color value="#3366FB"/> <color value="#0000FA"/> <color value="#F8CC00"/> <color value="#F89900"/> <color value="#F76600"/> </colorset> <optionset> <option set="setSize" value="600, 300"/> <option set="setTitle" value="'Phd Reference Chart'"/> <option set="setTitleFontFamily" value="'Times New Roman'"/> <option set="setTitleFontSize" value="14"/> <option set="setTitleColor" value="'#0F0F0F'"/> <option set="setPieRadius" value="95"/> <option set="setPieValuesColor" value="'#FFFFFF'"/> <option set="setPieValuesFontSize" value="9"/> <option set="setPiePosition" value="180, 165"/> <option set="setShowXValues" value="false"/> <option set="setLegend" value="'#99CDFB', 'Papers where authors found'"/> <option set="setLegend" value="'#3366FB', 'Papers which cite from other articles'"/> <option set="setLegend" value="'#0000FA', 'Papers which cite from news'"/> <option set="setLegend" value="'#F8CC00', 'Papers which lack crucial'"/> <option set="setLegend" value="'#F89900', 'Papers with different conclusion'"/> <option set="setLegend" value="'#F76600', 'Papers with useful information'"/> <option set="setLegendShow" value="true"/> <option set="setLegendFontFamily" value="'Times New Roman'"/> <option set="setLegendFontSize" value="10"/> <option set="setLegendPosition" value="350, 120"/> <option set="setPieAngle" value="30"/> <option set="set3D" value="true"/> </optionset> </JSChart>
但是，我自己有一個問題，百思不得其解。我完全按照上面的做了，可是下面的例子中Jschars.js一直出現異常，求解答啊！
?
轉載于:https://www.cnblogs.com/caozhenhua/archive/2012/07/22/2603738.html
總結
以上是生活随笔為你收集整理的Js Chars应用的全部內容，希望文章能夠幫你解決所遇到的問題。
