首先先至官網下載,連結如下

https://bitbucket.org/cleonello/jqplot/downloads/

從Example的部份可看出

網址:http://www.jqplot.com/tests/pie-donut-charts.php

使用方式大致如下

  • 每個統計圖表會使用的js檔是什麼
<script type="text/javascript" src="../src/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.donutRenderer.min.js"></script>
  • data是一個二維陣列['Heavy Industry', 12]:前面是顯示文字,後面是數值
  • ●renderer: jQuery.jqplot.PieRenderer:選擇要產生的圖形定義
  • ●legend: { show:true, location: 'e' }:位置的定義為東、南、西、北…,nw, n, ne, e, se, s, sw, w

 

 

範例程式碼

$(document).ready(function(){

  var data = [
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  ];
  var plot1 = jQuery.jqplot ('chart1', [data],
    {
      seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.PieRenderer,
        rendererOptions: {
          showDataLabels: true
        }
      },
      legend: { show:true, location: 'e' }
    }
  );
});
產生出來的圖形~~灑花~~

pie  

    mming 發表在 痞客邦 留言(0) 人氣()