Highcharts - 來自json的多個餅圖

Highcharts - 來自json的多個餅圖Highcharts - 來自json的多個餅圖

比方說，我有一臺帶有4個硬盤的服務器。如何顯示4個餅圖，每個硬盤一個？它適用於圖表類型是堆疊列（代碼如下）。 JSON產生這樣的輸出：

[{ 
    "name":"Drive", 
    "data":["C:","D:","E:","F:"]},{ 
    "name":"Free", 
    "data":[673869,2267920,105627,307096]},{ 
    "name":"Used", 
    "data":[94029,2264810,6373,104] 
}]

而且我的腳本代碼（堆疊列）：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Stacked column chart with data from MySQL using Highcharts</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      var options = { 
      colors: ['#50B432', '#ED561B'], 
       chart: { 
        renderTo: 'container', 
        type: 'column', 
        marginRight: 130, 
        marginBottom: 25 
       }, 
       title: { 
        text: 'Server', 
        x: -20 //center 
       }, 
       subtitle: { 
        text: '', 
        x: -20 
       }, 
       xAxis: { 
        categories: [] 
       }, 
       yAxis: { 
        title: { 
         text: 'Used/Free' 
        }, 
        plotLines: [{ 
         value: 0, 
         width: 1, 
         color: '#808080' 
        }] 
       }, 
       tooltip: { 
        formatter: function() { 
          return '<b>'+ this.series.name +'</b><br/>'+ 
          this.x +' '+ Highcharts.numberFormat(this.percentage, 2) +' %'; 
        } 
       }, 
       legend: { 
        layout: 'vertical', 
        align: 'right', 
        verticalAlign: 'top', 
        x: -10, 
        y: 100, 
        borderWidth: 0 
       }, 
        plotOptions: { 
        column: { 
         stacking: 'normal', 
         dataLabels: { 
          enabled: true, 
          color: '#000000', 
          formatter: function() { 
           return bytes(this.point.y, true); 
          } 
         } 
        } 
       }, 
       series: [] 
      } 

      $.getJSON("data2.php", function(json) { 
       options.xAxis.categories = json[0]['data']; 
       options.series[0] = json[1]; 
       options.series[1] = json[2]; 
       chart = new Highcharts.Chart(options); 
      }); 
     }); 
     function bytes(bytes, label) { 
      if (bytes == 0) return ''; 
      var s = ['MB', 'GB', 'TB', 'PB']; 
      var e = Math.floor(Math.log(bytes)/Math.log(1024)); 
      var value = ((bytes/Math.pow(1024, Math.floor(e))).toFixed(2)); 
      e = (e<0) ? (-e) : e; 
      if (label) value += ' ' + s[e]; 
      return value; 
     } 
     </script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script src="http://code.highcharts.com/modules/exporting.js"></script> 
    </head> 
    <body> 
     <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
    </body> 
</html>

謝謝你的任何建議。

來源

2015-11-11 user1060641

您可以遍歷每個json項目並創建新的div（例如append）和init圖表。

什麼是重要的，數據中的所有值應該是數字，而不是像你一樣的字符串。

實施例：

http://jsfiddle.net/9ov3en2t/

$(function() { 
var json = [{ 
    "name": "Drive", 
     "data": ["C:", "D:", "E:", "F:"] 
}, { 
    "name": "Free", 
     "data": [673869, 2267920, 105627, 307096] 
}, { 
    "name": "Used", 
     "data": [94029, 2264810, 6373, 104] 
}]; 

var each = Highcharts.each, 
    $charts = $('#charts'); 

each(json,function(item, i) { 
    $charts.append('<div id="container' + i + '"></div>'); 
    var $chart = $('#container' + i); 


    $chart.highcharts({ 
     chart:{ 
      type:'pie' 
     }, 
     series:[{ 
      name: item.name, 
      data: item.data 
     }] 
    }); 
});

}）;

來源

2015-11-12 10:12:47

Highcharts - 來自json的多個餅圖

回答

相關問題