ハイチャート - 共通コードと固有のデータを含むグローバル設定＆ヘッダー

Question

ハイチャートを使用しています。

私は単一のページで、異なるデータ&の複数のチャートと同じチャートプロパティ設定のAreaチャートを複数持っています。 2チャートへOnline Demo

チャート1からの変更点

、以下のようにチャート3：

• シリーズ名
• シリーズデータ
• 伝説
の
• ツールチップのデータ上記以外

、他のすべてが同じである...

にはどうすれば#chart-1, #chart-2, #chart-3などのためrepetitveコードを書く避ける...とだけの要素の上に設定することができますか？

HTML：

<div id="chart-1" style="height: 200px; width: 500px"></div> 
<div id="chart-2" style="height: 200px; width: 500px"></div> 
<div id="chart-3" style="height: 200px; width: 500px"></div> 

グローバル初期化：

jQuery(function() { 

    Highcharts.setOptions({ 
     colors: ['#fe5758', '#99cc03', '#33b5e6'], 
     chart: { 
      style: { 
       fontFamily: 'Roboto Light', 
       fontWeight: 'normal', 
       fontSize: '12px', 
       color: '#585858', 
      } 
     },  
     title: { text: null }, 
     subtitle: { text:null }, 
     credits: { enabled: false }, 
     exporting: { enabled: false }, 
...... 

チャート1：

$(function() { 
    $('#chart-1').highcharts({ 
     chart: { 
      type: 'area' 
     }, 
     xAxis: { 
      .... 

チャート2：

$(function() { 
    $('#chart-2').highcharts({ 
     chart: { 
      type: 'area' 
     }, 
     xAxis: { 
      .... 

Answer 1

あなたは次のように、共通しているオプションのための変数を行うことができます。

var commonOptions = { 
    chart: { 
     type: 'area' 
    }, 
    // ... 
}; 

そして、このような各チャートに固有のオプションでマージ：

$('#container').highcharts(Highcharts.merge(commonOptions, { 
    series: [{ 
     name: 'Tokyo', 
     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
    }] 
    // ... 
})); 

this JSFiddle example（凡例、ツールチップ、シリーズオプション）を参照してください。

Answer 2

createChartのような関数を作成するのはどうですか？変数を渡す？ http://jsfiddle.net/0s2pkps0/2/

newChart('#chart-1', 'Date', 'Count', series_1); 
newChart('#chart-2', 'Weekly report', 'Total views', series_2); 

function newChart(container, xAxisTitle, yAxisTitle, series) { 
    $(container).highcharts({ 
    chart: { 
     type: 'area' 
    }, 
    xAxis: { 
     type: 'datetime', 
     dateTimeLabelFormats: { 
     day: '%eth %b' 
     }, 
     title: { 
     text: xAxisTitle, 
     } 
    }, 

    yAxis: { 
     title: { 
     text: yAxisTitle 
     }, 
    }, 
    series: series 
    }); 
}