jQuery制作圖表之一--線圖(使用插件jquery.jqchart.js)的使用總結之一
問題描述：
在這個跨入web2.0的時代，也别說2.0的時代。就跨入現在這個鋪天蓋地的web系統的年頭，什麼都流行web化。田我做的是OA系統，大把大
把的系統等着二次開發成web形式。這裡有Delphi的，vb的。田是用asp.net開發的，這裡一個最大的問題是：圖表～！常見的圖示有3個：線
圖，柱狀圖，餅圖。
今天我嘗試寫一點關于我制作線圖的經驗和總結，使用的工具有：
1、jquery.js
2、jquery.jqchart.js 這個是使用到的插件
下載下傳位址：http://jsgt.org/lib/jquery/plugin/jqchart/nightly/nightly.htm官方示範位址
3、excanvas-compressed.js 制作圖像必備的canvas插件，可以使用vml資料格式。
圖示：
并且這在FF下也是運作正常的～！
How to do it？
說在前面，一定要引得檔案：
1、<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]--> 這個是将canvas标簽轉換為IE認識的vml。ff下是沒問題。
2、<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.jqchart.js"
charset="utf-8"></script>主要是第二個，他裡面的那
個$('#canvasMyID').jQchart(jsonobj);是最主要的方法。json對象建構完畢，頁面标簽寫完，就靠這個方法了。
3、<link rel="stylesheet" href="./jqchart-canvasMyID.css" type="text/css">樣式檔案，以照個人喜好吧，不強求。
這些官網都有下。參見前面的官網。
let's go～～～～
1、一個簡單的Demo
它隻有兩行！！！
<script>部分
$(document).ready(function(){
var chartSetting={data : [ [435,500,600,700,888,777,925] ]};
});
<html>部分的<body>裡
<canvas id="canvasMyID"></canvas>
可以了～！它可以運作了～！
對的，一切都是預設是，顯示格式，布局，排版，大小，寬度等，都是預設的。注意，它的資料格式是以數組的方式存在，是以一定要加"[ ]"。
2、我們嘗試修改一下預設的顯示。
chartSetting其實支援兩個值，一個是data，另一個是config；config支援很多的參數設定。包括：
width,height,chartWidth,chartHeight,paddingT,paddingR,scaleYLeft,scaleXBotton,ScaleXTop,titleLeft,titleTop
寫法很簡單 attribute: value, attribute: value, ......
舉個例子：
var chartSetting={
config : {
title : "Fucking Java web XY線圖<br/ >and There is a <br />",
titleLeft: 70,
labelX : ["X1","X2","X3","X4","X5","X6","X7"],
scaleY : {min: 0,max:1000,gap:200}
width: 400, //有影響
height: 500, //有影響
paddingL : 50, //有影響
paddingT : 50 //有影響
},
data : [
[435,500,600,700,888,777,925],
[50,123,312,200,402,300,512],
[100,400,790,640,128,347,567]
]
};
關于這些屬性的說明，我用一些圖來說明
大緻上就是這樣的情況，相對于任何屬性的操作都可以寫在config裡。這樣一個基本的圖就完成了。
未完待續。。。。。。下一篇我介紹一下如何寫配置屬性和屬性值，資料是如何動态生成的。
暫定：
1、如何拆分data和config屬性，隸屬不同的json檔案中。而不是txt檔案。
2、如何合并data.json和config.json檔案，生成線圖。
3、如何從一個table中抽離資料生成data，再和config.json合并生成線圖。