javascript - Highcharts -plotLines 不会渲染

Question

我已经为我在一页上使用的相同类型的 highcharts 设置了 highchart 选项。一切工作正常，但一件事是，它不会渲染图表的绘图线。我不确定我的设置是否正确。你可以看看我做了什么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

您需要在图表中单独设置选项。全局选项不会被每个图表的设置覆盖 - 但在您的个人图表中，您没有设置颜色或线条的宽度。从全局选项部分中删除 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。

这里是version使用 Highcharts.merge() 函数而不是外部函数。