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

• 圖例的位置。在默認狀況下，圖例是位於圖表內部的右上角的。這個位置大部分狀況下都沒有什麼太大的問題，但有時候數據起伏變化較大時，有可能被圖例遮擋。所以，有必要將圖例放在圖表的外部。要設置圖例在圖表外部，可使用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
      }
  }

  
  

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。