如何在Highcharts末尾而不是图表外部的图例中隐藏或禁用图例或标签。在下面用红色标记的照片中查看我的照片。
这是我的代码：
Highcharts.chart('container1', {
chart: {
scrollablePlotArea: {
minWidth: 700
}
},
title: {
text: ['Grafik Pencapaian <?php echo $title1 ?> (%)' ]
},
subtitle: {
text: 'Preventive Maintenance PM-03: (Tanggal : <?php echo $start ?> s/d <?php echo $end ?>)</a>'
},
xAxis: {
//tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'center',
y: 10
},
categories: [
<?php
foreach ($chart as $key => $x_axis ) :
echo "'".$x_axis->tanggal."',";
endforeach;
?>
]
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
},
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: this.y + ' %',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
legend: {
align: 'left',
verticalAlign: 'top',
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
series: [{
name: 'Selesai <?php echo $title1 ?> (%)',
color : '#83f442',
dataLabels: {
enabled: true,
y: 25,
color : '#488426',
format: '{y} % <br/>',
showInLegend: false
},
data: [
<?php
foreach ($chart as $key => $series ) :
echo number_format( $series->actual/$series->plan , 4, '.', '')*100 .",";
endforeach;?>
]
}, {
name: 'Year To Date <?php echo $title1 ?> (%)',
color : '#a02cb2',
dataLabels: {
enabled: true,
y: 40,
color : '#a02cb2',
format: '{y} % <br/>',
showInLegend: false
},
data: [
<?php
$cum_plan = 0;
$cum_actual = 0;
foreach ($chart as $key => $series ) :
$cum_plan = $cum_plan + $series->plan;
$cum_actual = $cum_actual + $series->actual;
echo number_format( $cum_actual/$cum_plan , 4, '.', '')*100 .",";
endforeach;?>
]
}, {
name: 'Target <?php echo $title1 ?> (%)',
color : '#ffaaaa',
dataLabels: {
enabled: true,
y: -10,
color : '#ffaaaa',
format: '{y} % <br/>',
showInLegend: false
},
data: [
<?php
foreach ($chart as $key => $series ) :
echo number_format( $series->plan/$series->plan , 4, '.', '')*100 .",";
endforeach;?>
]
}]
});
我必须尝试从stackoverflow的文章或帖子中找到的几种方法，但是到目前为止，没有人符合我的要求。
感谢进阶。
此致
答案 0 :(得分：1)
由于声誉我无法评论您的帖子，所以我会回答。我假设您可能在主代码中的某个位置包含了“ series-label.js ”文件，并且默认情况下会显示标签。您在这里有两个选择：
1-查找并删除其中包含“ series-label.js ”文件的代码行。看起来像这样：
<script src="https://code.highcharts.com/modules/series-label.js"></script>
2-您可以使用plotOptions.series块中的label选项手动禁用系列标签。通过修改此部分的代码，它看起来像这样：（请注意 label 部分，其中 enabled：false ）
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
},
series: {
cursor: 'pointer',
label: {
enabled: false
}
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: this.y + ' %',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
编辑： ：我为第二个解决方案添加了一个简单的演示。注释了有关禁用标签的部分，因此标签显示在图表系列中。如果您注释掉该部分，则不会显示标签。