jqPlot圖表插件使用說明（補遺）

原創

tang19880721

2020-02-21 17:04

圖例的位置。在默認情況下，圖例是位於圖表內部的右上角的。這個位置大部分情況下都沒有什麼太大的問題，但有時候數據起伏變化較大時，有可能被圖例遮擋。因此，有必要將圖例放在圖表的外部。要設置圖例在圖表外部，可以使用legend的一個配置placement，它的取值可以是insideGrid和inside，outsideGrid和outside，inside和outside分別是insideGrid和outsideGrid的簡寫。
```
legend:{
    show:true,
    placement:'outside' // 圖例位於圖表外部，placement默認值爲insideGrid，等價於inside，還可取值outside，等價於outsideGrid
}
```

另外，在圖例中顯示的”Series 1“這個字符串，可以通過設置series屬性的各個數組元素的label屬性來定製。

X軸標籤。默認的X軸標刻度顯示的是一系列數字，看不出任何實際意義。如果要改變這個顯示，可以通過設置axes屬性下的xaxis屬性的ticks屬性實現。它是一個數組，分別對應各個X節點的刻度名詞。
```
axes:{
    xaxis:{
        renderer:$.jqplot.CategoryAxisRenderer,
        label:'選項',
        ticks:['選項A', '選項B', '選項C', '選項D', '選項E']  // 一維數組
    },
    yaxis: {
        label: '投票數'
    }
}
```

{
    axes:{
        xaxis:{
            label:'日期',
            ticks:[[1,'05/01'], [2,'05/05'], [3,'05/10'], [4,'05/15'], [5,'05/20'], [6,'05/25']] // 二維數組
        },
        yaxis: {
            label: '投放數量'
        }
    }
}

沒有數據時的提示。很多時候，當我們請求數據時，可能並不能如願得到數據。如果沒有數據時該怎麼表現才比較合適呢？jqPlot中，如果不做任何配置，數據爲null或者空數組時，都會拋出No Data的異常，然後圖表顯示一片空白，這樣很不友好。但是如果我們稍作設置，就能很好的處理沒有數據的圖表展示效果。
```
$.jqplot('chart1', null, { // 數據也可以是[[]]
    noDataIndicator:{
        show:true,
        indicator:'<font color=red>暫無數據</font>' // 可使用html標籤
    }
});
```
顯示數據點的值。如果圖表只是一條線，看不到具體的數值，那麼圖表本身直觀展示數據的長處就發揮不出來。所以，圖表默認應該展示出各個數據點的值。但jqPlot默認沒有這麼做，如果要展示數據點取值，需要做一些配置。用到的屬性是pointLabels，這個配置需要引入jqplot.pointLabels.min.js文件。
```
seriesDefaults:{
    pointLabels: {  // 顯示數據點，依賴於jqplot.pointLabels.min.js文件
        show: true
    }
}
```