Question

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>

感谢您提出任何建议。

Answer 1

您可以迭代每个json项并创建新的div（例如附加）和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
        }]
    });
});

}）;

Highcharts - 来自json的多个饼图

1 个答案: