ハイチャート - plotLinesはレンダリングされません

Question

私は1つのページで使用している同じタイプのハイチャートのハイチャートオプションを設定しました。すべてうまくいきますが、1つのことは、グラフのplotLinesを描画しません。もし私が正しいことを設定しているかどうかはわかりません。あなたは私が何をしたかを見ることができますhere。あなたのチャートに個別のオプションを設定する必要が

$(function() { 

    Highcharts.setOptions({ 
     chart: { 
      type: 'boxplot' 
     }, 
     title: { 
      useHTML: true, 
     }, 
     legend: { 
      enabled: false 
     }, 
     xAxis: { 
      categories: ['2011', '2012', '2013', '2014', '2015'], 
      title: { 
       text: 'Experiment No.' 
      } 
     }, 
     yAxis: { 
      plotLines: [{ 
      color: 'red', 
      width: 1, 
      label: { 
       align: 'center', 
       style: { 
        color: 'gray' 
       } 
      } 
      }] 
     }, 
     series: [{ 
      color: Highcharts.getOptions().colors[0], 
      type: 'scatter', 
      marker: { 
       fillColor: 'white', 
       lineWidth: 1, 
       lineColor: Highcharts.getOptions().colors[0] 
      } 
     }] 
    }); 

var chart1 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'indikator1', 
    }, 
    title: { 
     text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon' 
    }, 
    yAxis: { 
     title: { 
     text: 'Verdi' 
     }, 
     plotLines: [{ 
     value: 932, 
     label: { 
      text: 'Theoretical mean: 932', 
     } 
     }] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
     }, 
     { 
     name: 'Outlier', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     tooltip: { 
      pointFormat: 'Observation: {point.y}' 
     } 
     }] 
    }); 

var chart2 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'indikator2', 
    }, 
    title: { 
     text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon' 
    }, 
    yAxis: { 
     title: { 
     text: 'Verdi' 
     }, 
     plotLines: [{ 
     value: 932, 
     label: { 
      text: 'Theoretical mean: 932', 
     } 
     }] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
     }, 
     { 
     name: 'Outlier', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     tooltip: { 
      pointFormat: 'Observation: {point.y}' 
     } 
     }] 
    }); 

var chart3 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'indikator3', 
    }, 
    title: { 
     text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon' 
    }, 
    yAxis: { 
     title: { 
     text: 'Verdi' 
     }, 
     plotLines: [{ 
     value: 932, 
     label: { 
      text: 'Theoretical mean: 932', 
     } 
     }] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
     }, 
     { 
     name: 'Outlier', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     tooltip: { 
      pointFormat: 'Observation: {point.y}' 
     } 
     }] 
    }); 

var chart4 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'indikator4', 
    }, 
    title: { 
     text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon' 
    }, 
    yAxis: { 
     title: { 
     text: 'Verdi' 
     }, 
     plotLines: [{ 
     value: 932, 
     label: { 
      text: 'Theoretical mean: 932', 
     } 
     }] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
     }, 
     { 
     name: 'Outlier', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     tooltip: { 
      pointFormat: 'Observation: {point.y}' 
     } 
     }] 
    }); 

var chart5 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'indikator5', 
    }, 
    title: { 
     text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon' 
    }, 
    yAxis: { 
     title: { 
     text: 'Verdi' 
     }, 
     plotLines: [{ 
     value: 932, 
     label: { 
      text: 'Theoretical mean: 932', 
     } 
     }] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
     }, 
     { 
     name: 'Outlier', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     tooltip: { 
      pointFormat: 'Observation: {point.y}' 
     } 
     }] 
    }); 

var chart6 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'indikator6', 
    }, 
    title: { 
     text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon' 
    }, 
    yAxis: { 
     title: { 
     text: 'Verdi' 
     }, 
     plotLines: [{ 
     value: 932, 
     label: { 
      text: 'Theoretical mean: 932', 
     } 
     }] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
     }, 
     { 
     name: 'Outlier', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     tooltip: { 
      pointFormat: 'Observation: {point.y}' 
     } 
     }] 
    }); 

var chart7 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'indikator7', 
    }, 
    title: { 
     text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon' 
    }, 
    yAxis: { 
     title: { 
     text: 'Verdi' 
     }, 
     plotLines: [{ 
     value: 932, 
     label: { 
      text: 'Theoretical mean: 932', 
     } 
     }] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
     }, 
     { 
     name: 'Outlier', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     tooltip: { 
      pointFormat: 'Observation: {point.y}' 
     } 
     }] 
    }); 

var chart8 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'indikator8', 
    }, 
    title: { 
     text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon' 
    }, 
    yAxis: { 
     title: { 
     text: 'Verdi' 
     }, 
     plotLines: [{ 
     value: 932, 
     label: { 
      text: 'Theoretical mean: 932', 
     } 
     }] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
     }, 
     { 
     name: 'Outlier', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     tooltip: { 
      pointFormat: 'Observation: {point.y}' 
     } 
     }] 
    }); 

var chart9 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'indikator9', 
    }, 
    title: { 
     text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon' 
    }, 
    yAxis: { 
     title: { 
     text: 'Verdi' 
     }, 
     plotLines: [{ 
     value: 932, 
     label: { 
      text: 'Theoretical mean: 932', 
     } 
     }] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
     }, 
     { 
     name: 'Outlier', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     tooltip: { 
      pointFormat: 'Observation: {point.y}' 
     } 
     }] 
    }); 

var chart10 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'indikator10', 
    }, 
    title: { 
     text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon' 
    }, 
    yAxis: { 
     title: { 
     text: 'Verdi' 
     }, 
     plotLines: [{ 
     value: 932, 
     label: { 
      text: 'Theoretical mean: 932', 
     } 
     }] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
     }, 
     { 
     name: 'Outlier', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     tooltip: { 
      pointFormat: 'Observation: {point.y}' 
     } 
     }] 
    }); 

var chart11 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'indikator11', 
    }, 
    title: { 
     text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon' 
    }, 
    yAxis: { 
     title: { 
     text: 'Verdi' 
     }, 
     plotLines: [{ 
     value: 932, 
     label: { 
      text: 'Theoretical mean: 932', 
     } 
     }] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
     }, 
     { 
     name: 'Outlier', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     tooltip: { 
      pointFormat: 'Observation: {point.y}' 
     } 
     }] 
    }); 
}); 

Answer 1

： そしてここで以下は私のスクリプトです。グローバルオプションはそれぞれのチャートの設定によって上書きされませんが、個々のチャートではcolorまたはそのラインのwidthが設定されていません。グローバルオプションセクションからplotLinesを削除し、各チャートのセクションでのみ実行します。

オブジェクトのプロパティのマージを処理するには、questionを使用できます。

function merge_options(obj1,obj2){ 
    var obj3 = {}; 
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; } 
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; } 
    return obj3; 
} 

var plotLinesOption = { 
       width: 1, 
       color: 'red' 
     }; 

    Highcharts.setOptions({ 
     chart: { 
      type: 'boxplot' 
     }, 
     title: { 
      useHTML: true, 
     }, 
     legend: { 
      enabled: false 
     }, 
     xAxis: { 
      categories: ['2011', '2012', '2013', '2014', '2015'], 
      title: { 
       text: 'Experiment No.' 
      } 
     }, 
     series: [{ 
      color: Highcharts.getOptions().colors[0], 
      type: 'scatter', 
      marker: { 
       fillColor: 'white', 
       lineWidth: 1, 
       lineColor: Highcharts.getOptions().colors[0] 
      } 
     }] 
    }); 

var chart1 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'indikator1', 
    }, 
    title: { 
     text: '<i class="ion-help"></i> Arbeidsmarkedsintegrasjon' 
    }, 
    yAxis: { 
     title: { 
     text: 'Verdi' 
     }, 
     plotLines: [merge_options(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
     }, 
     { 
     name: 'Outlier', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     tooltip: { 
      pointFormat: 'Observation: {point.y}' 
     } 
     }] 
    }); 

とライブdemo：ここではラフと準備ができたサンプルです。注：私はchart1のみ更新しました。

ここには、外部関数の代わりにHighcharts.merge（）関数を使用したversionがあります。