Highcharts複製代碼

Question

我已經使用Highcharts創建了2個餅圖，但我複製了代碼。

如何纔能有一個基於代碼 - 在不同的json文件中調用。

var chart1 = { 
       chart: { 
        renderTo: 'container1' 

       }, 
       title: { 
        text: 'Industry' 
       }, 

       plotArea: { 
        shadow: null, 
        borderWidth: null, 
        backgroundColor: null 
       }, 
       tooltip: { 
        formatter: function() { 
         return '<b>' + this.point.name + '</b>: ' + this.y.toFixed(2) + ' %/£' + this.point.mv; 
        } 
       }, 
       plotOptions: { 
        pie: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         showInLegend: true, 
         dataLabels: { 
          enabled: true, 
          formatter: function() { 
           return ' '+ this.y.toFixed(2) +' %'; 
          }, 
          color: 'black', 
          style: { 
           font: '100% Arial, Verdana, sans-serif' 
          } 
         } 
        } 
       }, 
       credits: { 
        enabled: false, 
        text: 'Newton.co.uk' 
       }, 
       legend: { 
        itemStyle: { 
         color: '#444', 
         fontWeight: 'normal', 
         fontFamily: 'Arial', 
         fontSize: '100%' 
        }, 

        verticalAlign: 'bottom', 
        x: -100, 
        y: 0, 
        width: '100%', 
        itemWidth: 'auto', 
        floating: false, 
        labelFormatter: function() { 
         return this.name + ': ' + this.y.toFixed(2) + ' %'; 
        }, 
        borderWidth: 0, 
        margin: 0, 
        lineHeight: 50 
       }, 
       series: [] 
      } 

      var options = chart1; 


       $.getJSON(link + "/valuations/industry.json", null, function (items) { 
       var valuations = items.valuations; 
        var series = { 
         type: 'pie', 
         name: '', 
         data: [] 
        }; 
        console.log(valuations); 
       $.each(valuations, function (itemNo, item) { 
        series.data.push({ 
         name: item.id, 
         y: parseFloat(item.percentageMarketValue), 
         mv: item.marketValue 
        }) 
       }); 




       options.series.push(series); 
       chart1 = new Highcharts.Chart(options); 
       //chart.render(); 
      }); 


      var chart2 = { 
       chart: { 
        renderTo: 'container2' 

       }, 
       title: { 
        text: 'Geographic' 
       }, 

       plotArea: { 
        shadow: null, 
        borderWidth: null, 
        backgroundColor: null 
       }, 
       tooltip: { 
        formatter: function() { 
         return '<b>' + this.point.name + '</b>: ' + this.y.toFixed(2) + ' %/£' + this.point.mv; 
        } 
       }, 
       credits: { 
        enabled: false, 
        text: 'Newton.co.uk' 
       }, 
       plotOptions: { 
        pie: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         showInLegend: true, 
         dataLabels: { 
          enabled: true, 
          formatter: function() { 
           return ' '+ this.y.toFixed(2) +' %'; 
          }, 
          color: 'black', 
          style: { 
           font: '100% Arial, Verdana, sans-serif' 
          } 
         } 
        } 
       }, 
       legend: { 
        itemStyle: { 
         color: '#444', 
         fontWeight: 'normal', 
         fontFamily: 'Arial', 
         fontSize: '100%' 
        }, 

        verticalAlign: 'bottom', 
        x: -100, 
        y: 0, 
        width: '100%', 
        itemWidth: 'auto', 
        floating: false, 
        labelFormatter: function() { 
         return this.name + ': ' + this.y.toFixed(2) + ' %'; 
        }, 
        borderWidth: 0, 
        margin: 0, 
        lineHeight: 50 
       }, 
       series: [] 
      } 

     var options2 = chart2; 

       $.getJSON(link + "/valuations/geographic.json", null, function (items) { 

       var valuations = items.valuations; 
        var series = { 
         type: 'pie', 
         name: '', 
         data: [] 
        }; 
       $.each(valuations, function (itemNo, item) { 
        series.data.push({ 
         name: item.id, 
         y: parseFloat(item.percentageMarketValue), 
         mv: item.marketValue 
        }) 
       }); 

       options2.series.push(series); 
       chart2 = new Highcharts.Chart(options2); 
       //chart.render(); 
      }); 




      Highcharts.setOptions({ 
       colors: ['#9E8F6C', '#7BA1CD', '#666666', '#A2B021', '#DC7000', '#336666', '#FF9655', '#999999'] 
      }); 


      $('#export').click(function() { 
       Highcharts.exportCharts([chart1, chart2]); 
      }); 

     }); 

Answer 1

見代碼註釋：

// Define a default set of chart options 
var defaultChart = { 
    chart: { 
     renderTo: 'chart' 
    }, 
    title: { 
     text: 'Chart' 
    }, 
    plotArea: { 
     shadow: null, 
     borderWidth: null, 
     backgroundColor: null 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>' + this.point.name + '</b>: ' + this.y.toFixed(2) + ' %/£' + this.point.mv; 
     } 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      showInLegend: true, 
      dataLabels: { 
       enabled: true, 
       formatter: function() { 
        return ' ' + this.y.toFixed(2) + ' %'; 
       }, 
       color: 'black', 
       style: { 
        font: '100% Arial, Verdana, sans-serif' 
       } 
      } 
     } 
    }, 
    credits: { 
     enabled: false, 
     text: 'Newton.co.uk' 
    }, 
    legend: { 
     itemStyle: { 
      color: '#444', 
      fontWeight: 'normal', 
      fontFamily: 'Arial', 
      fontSize: '100%' 
     }, 

     verticalAlign: 'bottom', 
     x: -100, 
     y: 0, 
     width: '100%', 
     itemWidth: 'auto', 
     floating: false, 
     labelFormatter: function() { 
      return this.name + ': ' + this.y.toFixed(2) + ' %'; 
     }, 
     borderWidth: 0, 
     margin: 0, 
     lineHeight: 50 
    }, 
    series: [] 
}; 
// Create a function that will fetch the data and create the chart based on passed options 
function makeChart(url, chart, options) { 
    $.getJSON(link + url, null, function(items) { 
     var valuations = items.valuations; 
     var series = { 
      type: 'pie', 
      name: '', 
      data: [] 
     }; 
     $.each(valuations, function(itemNo, item) { 
      series.data.push({ 
       name: item.id, 
       y: parseFloat(item.percentageMarketValue), 
       mv: item.marketValue 
      }) 
     }); 

     options.series.push(series); 
     chart = new Highcharts.Chart(options); 
     //chart.render(); 
    }); 
} 
//Set up chart1's custom options 
var chart1 = { 
    chart: { 
     renderTo: 'container1' 
    }, 
    title: { 
     text: 'Industry' 
    } 
} 
// Call our new function to make the chart 
makeChart("/valuations/industry.json", chart1, $.extend(true, {}, default_chart, chart1)); 
// Setup chart2's custom options 
var chart2 = { 
    chart: { 
     renderTo: 'container2' 

    }, 
    title: { 
     text: 'Geographic' 
    } 
} 
// Call our new function to make the chart 
makeChart("/valuations/geographic.json", chart2, $.extend(true, {}, default_chart, chart2)); 


Highcharts.setOptions({ 
    colors: ['#9E8F6C', '#7BA1CD', '#666666', '#A2B021', '#DC7000', '#336666', '#FF9655', '#999999'] 
}); 


$('#export').click(function() { 
    Highcharts.exportCharts([chart1, chart2]); 
});