向下钻取事件时隐藏绘图线（Highcharts.js） [英] Hide Plot Line on Drill down Event (Highcharts.js)
问题描述
我有一个条形图，可以向下钻取到折线图，在根（条形图）我显示一条显示平均值的绘图线红色，问题是，当我向下钻取到折线图时，如果 yAxis 允许，它是可见的（红色绘图线） ，我想隐藏绘图线，因为我只需要在根（条形图）中看到它的平均值，而不是当我向下钻取时。
所以我不知道是否有一种方法来隐藏绘图线，当我钻取。
这是我的图表代码，我用PHP填充它，数据来自XML 。
$（'＃todo'）。highcharts（{
title：{
text：'Registro de IPE delaño2017 al'+<？php echo date（'Y'）？>
}，
字幕：{
text：'Click para verg Descendos delaño。'
}，
xAxis：{
type：'category'
}，
yAxis：{
title：{
text：'HORAS''
}，
plotLines：[{
color：'red'，
value：avg，//在这里插入你的平均值
width：'1'，
zIndex：2，//不要卡在常规图下
标签：{text：'Promedio：'+ parseInt（avg）}
}]
}，
学分：{
启用：false
}，
legend：{
enabled：false
}，
plotOptions：{
series：{
borderWidth：0，
dataLabels： {
启用：true，
for mat：'{point.y：.1f}'
}
}
}，
lang：{
drillUpText：'<< VOLVER'
}，
tooltip：{
headerFormat：''，
pointFormat：'< span style =color：{point.color}> ; {point.name}：< / span> < b取代; {point.y}< / B个Horas< br />'
}，
系列：[{
name：'Brands'，
type：'column'，
colorByPoint ：true，
data：[
<？php
for（$ i = 0; $ i <$ total_registros; $ i ++）
{
？> ;
{
name：'<？php echo $ registros-> registro [$ i] - >Año; ？>'，
y：<？php list（$ horas，$ minutos）= split（'[：]'，$ registros-> registro [$ i] - > TOTAL）; echo $ horas; ？>，
drilldown：'<？php echo $ registros-> registro [$ i] - >Año; >'
}，
<？php
}
？>
drilldown：{
drillUpButton：{
relativeTo：'spacingBox'，
position：{
y：0，
$ b}]，
drilldown：
x：0
}，
主题：{
fill：'white'，
'stroke-width'：1，
stroke：'silver' ，
r：0，
表示：{
hover：{
fill：'＃a4edba'
}，
select：{
stroke ：'＃039'，
fill：'＃a4edba'
}
}
}
}，
系列：[$ b （$ j = 0; $ j< $ total_registros; $ j ++）
{
？>
$ b {
type：'line'，
name：'<？php echo $ registros-> registro [$ j] - >Año; ？>'，
id：'<？php echo $ registros-> registro [$ j] - >Año; ？'，
data：[
[
'Enero'，
<？php list（$ horas，$ minutos）= split（'[：]'， $ registros-> registro [$ J] - > Enero）; echo $ horas; ？>
]，
[
'Febrero'，
<？php list（$ horas，$ minutos）= split（'[：]'，$ registros-> registro [$ J] - > Febrero）; echo $ horas; ？>
]，
[
'Marzo'，
<？php list（$ horas，$ minutos）= split（'[：]'，$ registros-> registro [$ J] - >马索）; echo $ horas; ？>
]，
[
'Abril'，
<？php list（$ horas，$ minutos）= split（'[：]'，$ registros-> registro [$ J] - >四月）; echo $ horas; ？>
]，
[
'Mayo'，
<？php list（$ horas，$ minutos）= split（'[：]'，$ registros-> registro [$ J] - >梅奥）; echo $ horas; ？>
]，
[
'Junio'，
<？php list（$ horas，$ minutos）= split（'[：]'，$ registros-> registro [$ J] - > JUNIO）; echo $ horas; ？>
]，
[
'Julio'，
<？php list（$ horas，$ minutos）= split（'[：]'，$ registros-> registro [$ J] - >胡）; echo $ horas; ？>
]，
[
'Agosto'，
<？php list（$ horas，$ minutos）= split（'[：]'，$ registros-> registro [$ J] - >阿冈斯托）; echo $ horas; ？>
]，
[
'Septiembre'，
<？php list（$ horas，$ minutos）= split（'[：]'，$ registros-> registro [$ J] - > Septiembre）; echo $ horas; ？>
]，
[
'Octubre'，
<？php list（$ horas，$ minutos）= split（'[：]'，$ registros-> registro [$ J] - > OCTUBRE）; echo $ horas; ？>
]，
[
'Noviembre'，
<？php list（$ horas，$ minutos）= split（'[：]'，$ registros-> registro [$ J] - > Noviembre）; echo $ horas; ？>
]，
[
'Diciembre'，
<？php list（$ horas，$ minutos）= split（'[：]'，$ registros-> registro [$ J] - > DICIEMBRE）; echo $ horas; ？>
]
]
}，
<？php
}
？>
]
}}）;
最简单的解决方案是将 drilldown 事件，并将其添加到 drillup 事件中。
API参考：
http://api.highcharts.com/ highcharts / chart.events.drilldown
http： //api.highcharts.com/highcharts/chart.events.drillup
http://api.highcharts.com/highcharts/Axis.addPlotLine
http://api.highcharts.com/highcharts/Axis.removePlotLine
示例：
http：// jsfidd le.net/cpcb8acn/
Is it possible to hide a Plot Line when I Drill down?
I have a Bar chart that Drill down to a Line Chart, in the "root" (Bar chart) I show a Plot Line Red that shows the Average value, the problem is that when I Drill down to the Line Chart, if the yAxis allow it, it is visible (the Red Plot Line), I want to hide the Plot Line on Drill down, because that average value I just need to see it in the "root" (Bar chart) not when I Drill down.
The average Plot Line has a value of 1865 and it is visible only in the year 2019, because is the only year where it reaches a value high enough to get the yAxis near that value.
So I wonder if theres a way to Hide the Plot Line when I Drill down.
This is my Chart code, i fill it up with PHP, data comes from an XML.
$('#todo').highcharts({
title: {
text: 'Registro de IPE del año 2017 al '+<?php echo date('Y')?>
},
subtitle: {
text: 'Click para ver desgloce del año.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Tiempo de Indisponibilidad (HORAS)'
},
plotLines: [{
color: 'red',
value: avg, // Insert your average here
width: '1',
zIndex: 2, // To not get stuck below the regular plot lines
label:{text:'Promedio: '+parseInt(avg)}
}]
},
credits: {
enabled:false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}'
}
}
},
lang: {
drillUpText: '<< VOLVER'
},
tooltip: {
headerFormat: '',
pointFormat: '<span style="color:{point.color}">{point.name}: </span> <b> {point.y}</b> Horas<br/>'
},
series: [{
name: 'Brands',
type: 'column',
colorByPoint: true,
data: [
<?php
for($i = 0; $i < $total_registros; $i++)
{
?>
{
name: '<?php echo $registros->registro[$i]->Año; ?>',
y: <?php list($horas, $minutos) = split('[:]', $registros->registro[$i]->TOTAL); echo $horas; ?>,
drilldown: '<?php echo $registros->registro[$i]->Año; ?>'
},
<?php
}
?>
]
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#a4edba'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}
},
series: [
<?php
for($j = 0; $j < $total_registros; $j++)
{
?>
{
type: 'line',
name: '<?php echo $registros->registro[$j]->Año; ?>',
id: '<?php echo $registros->registro[$j]->Año; ?>',
data:[
[
'Enero',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Enero); echo $horas; ?>
],
[
'Febrero',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Febrero); echo $horas; ?>
],
[
'Marzo',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Marzo); echo $horas; ?>
],
[
'Abril',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Abril); echo $horas; ?>
],
[
'Mayo',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Mayo); echo $horas; ?>
],
[
'Junio',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Junio); echo $horas; ?>
],
[
'Julio',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Julio); echo $horas; ?>
],
[
'Agosto',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Agosto); echo $horas; ?>
],
[
'Septiembre',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Septiembre); echo $horas; ?>
],
[
'Octubre',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Octubre); echo $horas; ?>
],
[
'Noviembre',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Noviembre); echo $horas; ?>
],
[
'Diciembre',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Diciembre); echo $horas; ?>
]
]
},
<?php
}
?>
]
}});
The easiest solution would be to remove plot line on drilldown event and add it again on drillup event.
API Reference:
http://api.highcharts.com/highcharts/chart.events.drilldown
http://api.highcharts.com/highcharts/chart.events.drillup
http://api.highcharts.com/highcharts/Axis.addPlotLine
http://api.highcharts.com/highcharts/Axis.removePlotLine
Example:
http://jsfiddle.net/cpcb8acn/
这篇关于向下钻取事件时隐藏绘图线（Highcharts.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
