問題描述：
在這個跨入web2.0的時代，也別說2.0的時代。就跨入如今這個鋪天蓋地的web系統的年頭，什麼都流行web化。田我作的是OA系統，大把大 把的系統等着二次開發成web形式。這裏有Delphi的，vb的。田是用asp.net開發的，這裏一個最大的問題是：圖表～！常見的圖標有3個：線 圖，柱狀圖，餅圖。
今天我嘗試寫一點關於我製做線圖的經驗和總結，使用的工具備：
一、jquery.js
二、jquery.jqchart.js 這個是使用到的插件
下載地址： http://jsgt.org/lib/jquery/plugin/jqchart/nightly/nightly.htm官方演示地址
三、excanvas-compressed.js 製做圖像必備的canvas插件，可使用vml數據格式。
一、jquery.js
二、jquery.jqchart.js 這個是使用到的插件
下載地址： http://jsgt.org/lib/jquery/plugin/jqchart/nightly/nightly.htm官方演示地址
三、excanvas-compressed.js 製做圖像必備的canvas插件，可使用vml數據格式。
圖示：
而且這在FF下也是運行正常的～！
How to do it？
說在前面，必定要引得文件：
一、<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]--> 這個是將canvas標籤轉換爲IE認識的vml。ff下是沒問題。
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]--> 這個是將canvas標籤轉換爲IE認識的vml。ff下是沒問題。
二、<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.jqchart.js" charset="utf-8"></script>主要是第二個，他裏面的那 個$('#canvasMyID').jQchart(jsonobj);是最主要的方法。json對象構建完畢，頁面標籤寫完，就靠這個方法了。
<script type="text/javascript" src="./jquery.jqchart.js" charset="utf-8"></script>主要是第二個，他裏面的那 個$('#canvasMyID').jQchart(jsonobj);是最主要的方法。json對象構建完畢，頁面標籤寫完，就靠這個方法了。
三、<link rel="stylesheet" href="./jqchart-canvasMyID.css" type="text/css">樣式文件，以照我的喜愛吧，不強求。
這些官網都有下。參見前面的官網。
let's go～～～～
一、一個簡單的Demo
它只有兩行！！！
<script>部分
$(document).ready(function(){
var chartSetting={data : [ [435,500,600,700,888,777,925] ]};
});
<html>部分的<body>裏
<canvas id="canvasMyID"></canvas>
<script>部分
$(document).ready(function(){
var chartSetting={data : [ [435,500,600,700,888,777,925] ]};
});
<html>部分的<body>裏
<canvas id="canvasMyID"></canvas>
能夠了～！它能夠運行了～！
對的，一切都是默認是，顯示格式，佈局，排版，大小，寬度等，都是默認的。注意，它的數據格式是以數組的方式存在，因此必定要加" [ ]"。
對的，一切都是默認是，顯示格式，佈局，排版，大小，寬度等，都是默認的。注意，它的數據格式是以數組的方式存在，因此必定要加" [ ]"。
二、咱們嘗試修改一下默認的顯示。
chartSetting其實支持兩個值，一個是data，另外一個是config；config支持不少的參數設定。包括：
width,height,chartWidth,chartHeight,paddingT,paddingR,scaleYLeft,scaleXBotton,ScaleXTop,titleLeft,titleTop
寫法很簡單 attribute: value, attribute: value, ......
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]
]
};
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裏。這樣一個基本的圖就完成了。
未完待續。。。。。。下一篇我介紹一下如何寫配置屬性和屬性值，數據是如何動態生成的。
暫定：
一、如何拆分data和config屬性，隸屬不一樣的json文件中。而不是txt文件。
二、如何合併data.json和config.json文件，生成線圖。
三、如何從一個table中抽離數據生成data，再和config.json合併生成線圖。