close

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

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  
arrow
arrow
    文章標籤
    jqueryui jquery jplot 統計圖形 html
    全站熱搜

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

    E-mail轉寄