如何顯示2個相同的高圖不重複的代碼

Question

我有2個div的相同的內容，我想顯示在2個div內相同的餅圖，但只是第一個顯示，我知道重複js的想法代碼並使id像＃容器1，＃容器2，但有沒有辦法避免代碼重複。 謝謝。

這裏是JS：

$(document).ready(function() { 

    // Build the chart 
    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      type: 'pie' 
     }, 
     title: { 
      text: '' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false 
       }, 
       showInLegend: true 
      } 
     }, 
     series: [{ 
      name: 'Brands', 
      colorByPoint: true, 
      data: [{ 
       name: 'Unused', 
       y: 40, 
       color: '#eeeeee', 
       sliced: true, 
       selected: true 
      }, { 
       name: 'Used', 
       y: 60, 
       color: '#ff7900', 
       selected: true 

      }] 
     }] 
    }); 

    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      type: 'pie' 
     }, 
     title: { 
      text: '' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false 
       }, 
       showInLegend: true 
      } 
     }, 
     series: [{ 
      name: 'Brands', 
      colorByPoint: true, 
      data: [{ 
       name: 'Unused', 
       y: 40, 
       color: '#eeeeee', 
       sliced: true, 
       selected: true 
      }, { 
       name: 'Used', 
       y: 60, 
       color: '#ff7900', 
       selected: true 

      }] 
     }] 
    }); 
}); 

和HTML：

<div id='container' style="margin-top:300px">pie1</div> 
<div id='container' style="margin-top:500px">pie2</div> 

Answer 1

您可以一次定義Highchart配置對象，並多次使用它，就像這樣：

$(document).ready(function() { 
 
    // Using classes to select multiple containers 
 
    var $containers = $(".container"); 
 
    // You just set the configuration object once 
 
    var chartConfig = { 
 
     chart: { 
 
      plotBackgroundColor: null, 
 
      plotBorderWidth: null, 
 
      plotShadow: false, 
 
      type: 'pie' 
 
     }, 
 
     title: { 
 
      text: '' 
 
     }, 
 
     tooltip: { 
 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
 
     }, 
 
     plotOptions: { 
 
      pie: { 
 
       allowPointSelect: true, 
 
       cursor: 'pointer', 
 
       dataLabels: { 
 
        enabled: false 
 
       }, 
 
       showInLegend: true 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: 'Brands', 
 
      colorByPoint: true, 
 
      data: [{ 
 
       name: 'Unused', 
 
       y: 40, 
 
       color: '#eeeeee', 
 
       sliced: true, 
 
       selected: true 
 
      }, { 
 
       name: 'Used', 
 
       y: 60, 
 
       color: '#ff7900', 
 
       selected: true 
 

 
      }] 
 
     }] 
 
    }; 
 
    // And then for every container init Hightchart with the same object 
 
    $containers.each(function() { 
 
     $(this).highcharts(chartConfig); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.src.js"></script> 
 

 

 
<div id="container1" class="container">pie1</div> 
 
<div id="container2" class="container">pie2</div>