我为同一类型的高级图表设置了高级图选项，我在一个页面上使用。一切正常，但有一点，它不会为图表渲染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}'
}
}]
});
});
答案 0 :(得分：2)
您需要在图表中单独设置选项。您的每个图表设置都不会覆盖全局选项 - 但在您的单个图表中，您没有设置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。
以下是version使用Highcharts.merge（）函数而不是外部函数。