非常棒的jqChart圖表插件

由於項目需要，做一些類似於OA系統的應用時，表格用到的是最多的，那么圖表展示就先顯得尤為的重要，其中柱柱狀圖、折線圖、餅狀圖又居多。

之前一直使用的是Chrome下的googleAPI中提供的chartAPI來進行表格的控制，其中對表格坐標的樣式和細節調整做的比較好，但是一個不太好的問題是，很多關於googleAPI的東西需要遠程加載，

而google CDN的加載和訪問 有時候受到地域等一系列因素會很慢，導致頁面報表遲遲無法生成，造成的用戶體驗下降還是有些明顯的。

后來又接觸了一下jQuery.plot的一款插件，效果也比較好。

之后就用到了JQChart 大家的反響都不錯，數據的生成多樣，表格展示也很不錯，但是某些情況下不適合大數據量的報表使用，會造成在局部范圍內坐標軸 X值的顯示錯位問題，google很好的解決了這個問題，但是

這款插件目前還無法解決這一問題，但是可以用過添加水平滾動等方式，處理這一類問題，但是本人更傾向於一次性展示出來。

下面就大概的來說一下jqChart插件中的一些options的使用

 $(document).ready(function () {
            var background = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 0,
                y1: 1,
                colorStops: [{ offset: 0, color: '#d2e6c9' },
                             { offset: 1, color: 'white'}]
            };
            $('#jqChart').jqChart({
                title: { text: 'Axis Settings' },//圖表標題
                border: { strokeStyle: '#6ba851' },//邊線顏色
                background: background,/*背景漸變色的調整*/
                animation: { duration: 1 },//動畫效果
                /*crosshairs: {
                      enabled: true, // specifies whether the crosshairs are visible
                      snapToDataPoints: true, // specifies whether the crosshairs span to data points
                      hLine: { visible: true, strokeStyle: 'red' }, // horizontal line options
                      vLine: { visible: true, strokeStyle: 'red' } // vertical line options
                 },//十字准線樣式修改*/
                 /* paletteColors :{
                          type: 'default', // default, grayscale, customColors
                          customColors : undefined
                  },//t調色板*/
                  /*legend: {//標注的一些樣式修改
                      title: { margin: 0 }, // legend title
                      border: { 
                                padding: 2, 
                                strokeStyle: 'grey', 
                                cornerRadius: 6 
                              }, // legend border
                      font: '12px sans-serif', // item text font
                      textFillStyle: 'black',  // item text color
                      textLineWidth: 0, // item text border line width
                      textStrokeStyle : undefined,  // item text border color
                      background: undefined, // legend background
                      margin: 4, // legend margings
                      visible : true // specifies if the legend is visible
                 },*/
                axes: [/*此處是對軸線的一些優化*/
                        {
                            location: 'left',
                            minimum: 10,
                            maximum: 700,
                            interval: 100
                        }
                      ],
                series: [
                            {
                                title:"班級排名",
                                type: 'line',
                                data: [
                                      ['1-1班',  1],
                                      ['1-2班',  20],
                                      ['1-3班',   60],
                                      ['1-4班',  500],
                                      ['1-5班',  300],
                                      ['1-6班',  200],
                                      ['2-1班',  268],
                                      ['2-2班',  423],
                                      ['2-3班',  321],
                                      ['2-4班',  456],
                                      ['2-5班',  385],
                                      ['2-6班',  578],
                                      ['3-1班',  512],
                                      ['3-2班',  456],
                                      ['3-3班',  478],
                                      ['3-4班',  356],
                                      ['3-5班',  478],
                                      ['3-6班',  189]
                                ]
                            },
                             {
                                title:"排名",
                                type: 'line',
                                data: [
                                      ['1-1班',  200],
                                      ['1-2班',  20],
                                      ['1-3班',  160],
                                      ['1-4班',  200],
                                      ['1-5班',  330],
                                      ['1-6班',  20],
                                      ['2-1班',  68],
                                      ['2-2班',  463],
                                      ['2-3班',  321],
                                      ['2-4班',  486],
                                      ['2-5班',  300],
                                      ['2-6班',  508],
                                      ['3-1班',  312],
                                      ['3-2班',  616],
                                      ['3-3班',  178],
                                      ['3-4班',  556],
                                      ['3-5班',  178],
                                      ['3-6班',  489]
                                ]
                            }
                        ]
            });
        });

通過這種方式可以制作出精美的圖標，圖標展示如下圖所示，做好的