我想使用基於Highcharts演示不同的數據，但相同的選項

Question

使用幾個Highcharts，我在我的HTML如下：

<div class="container" style="height: 300px; width:500px"></div> 
<script type="text/javascript" src="charts.js"></script> 

而且下面我charts.js：

$(document).ready(function() { 
    $('.container').highcharts({ 
     credits: { 
      enabled: false 
     }, 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: label 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
      percentageDecimals: 1 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        formatter: function() { 
         return '<b>'+ this.point.name +'</b>: '+ this.y; 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'Space', 
      type: 'pie', 
      data: [ 
       ['Used', used - 0 ], 
       ['Free', free - 0 ], 
      ] 
     }] 
    }); 
}); 

這是一個顯示驅動器信息的餅圖。但是，我有一個腳本可以動態生成這些數據（取決於有多少個驅動器），所以我不想爲每個驅動器創建一個新的圖表。我想動態創建一個div（這將在PHP中，因此我可以設置一個foreach循環），併爲每個驅動器調用餅圖。

Answer 1

爲什麼不在php循環中創建圖表併爲每個圖表調用.highcharts？

如果要創建單個配置對象，請使用jQuery的extend方法。

小提琴示例here。

// create your base config 
var baseConfig = { 
    credits: { 
     enabled: false 
    }, 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false 
    },   
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
     percentageDecimals: 1 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true, 
       color: '#000000', 
       connectorColor: '#000000', 
       formatter: function() { 
        return '<b>'+ this.point.name +'</b>: '+ this.y; 
       } 
      } 
     } 
    } 
}; 

// create your data 
var data1 = {title: { 
     text: 'One' 
    }, 
    series: [{ 
     name: 'Space', 
     type: 'pie', 
     data: [ 
      ['Used', 30], 
      ['Free', 70], 
     ] 
}]}; 

var data2 = {title: { 
     text: 'Two' 
    }, 
    series: [{ 
     name: 'Space', 
     type: 'pie', 
     data: [ 
      ['Used', 60 ], 
      ['Free', 40], 
     ] 
    }]}; 

    //combine them 
    $('#container1').highcharts(
     $.extend(baseConfig, data1) 
); 

    $('#container2').highcharts(
    $.extend(baseConfig, data2) 
); 

Answer 2

而不是使用許多餅圖/容器，你只能推適當的系列。

例子：http://jsfiddle.net/u7FQS/18/

series: [{ 
      type: 'pie', 
      name: 'testname1', 
      center: [70, 140], 
      showInLegend: true, 
      data: [ 
       ['Commerce', 33.0], 
       ['Engineering', 32.3], { 
        name: 'Financial Services', 
        y: 18.8, 
        sliced: true, 
        selected: true 
       }, ['Logistics, Aviation & Shipping', 5.5], 
       ['Seafood & Marine', 9.2], 
       ['Corporate Services & others', 1.2] 
      ] 
     }, { 
      type: 'pie', 
      name: 'testname2', 
      center: [230, 140], 
      showInLegend: false, 
      data: [ 
       ['Commerce', 33.0], 
       ['Engineering', 32.3], { 
        name: 'Financial Services', 
        y: 18.8, 
        sliced: true, 
        selected: true 
       }, ['Logistics, Aviation & Shipping', 5.5], 
       ['Seafood & Marine', 9.2], 
       ['Corporate Services & others', 1.2] 
      ] 
     }, { 
      type: 'pie', 
      name: 'testname3', 
      center: [390, 140], 
      showInLegend: false, 
      data: [ 
       ['Commerce', 33.0], 
       ['Engineering', 32.3], { 
        name: 'Financial Services', 
        y: 18.8, 
        sliced: true, 
        selected: true 
       }, ['Logistics, Aviation & Shipping', 5.5], 
       ['Seafood & Marine', 9.2], 
       ['Corporate Services & others', 1.2] 
      ] 
     }, { 
      type: 'pie', 
      name: 'testname4', 
      center: [550, 140], 
      showInLegend: false, 
      data: [ 
       ['Commerce', 33.0], 
       ['Engineering', 32.3], { 
        name: 'Financial Services', 
        y: 18.8, 
        sliced: true, 
        selected: true 
       }, ['Logistics, Aviation & Shipping', 5.5], 
       ['Seafood & Marine', 9.2], 
       ['Corporate Services & others', 1.2] 
      ] 
     }]