为什么不在高层图中显示该行？ [英] Why is the line not displayed in the highcharts?

问题描述

我试图用highcharts来制作甜甜圈图表。使用 onmouseover 我想要隐藏所有标签并显示选定的数据标签。我可以使用这些行来完成
的操作：

that.series.dataLabelsGroup 。隐藏（）;
that.dataLabel.show（）;


但是它也隐藏了我的线，我连接到图表的数据值。为什么这行不显示在高图中？这里是我的代码：

  // Mouseover handler 
 function（e）{
 var that = this; 
 var series = this.series; 
 console.log（series）; 
 
 for（var i = 0; i< series.data.length; i ++）{
 var point = series.data [i]; 
 console.log（point）
 
 if（point == this）{
 console.log（'yes'）; 
 point.update（{
 color：series.chart.options.colors [this.index] 
}）; 
} else {
 point.update（{
 color：'#CCCCCC'
}）; 
} 
} 
 that.series.dataLabelsGroup.hide（）; 
 that.dataLabel.show（）; 
 
返回false; 
} 
  

jsfiddle
http://jsfiddle.net/nyhmdtb8/11/

解决方案

您不必直接使用svg元素，但可以在点更新期间隐藏所有必要的数据标签。

显示数据标签：

  point.update（{
 color：series.chart.options.colors [this。 index]，
 dataLabels：{
 enabled：true 
} 
}）; 
  

并隐藏数据标签：

<$ p $ （
color：'#CCCCCC'，
dataLabels：{
enabled：false
}
}）;

示例： http://jsfiddle.net/nyhmdtb8/12/

I am trying to make a donut chart using highcharts. With onmouseover I want to hide all labels and show the selected data label. I am able to do that using these lines:

that.series.dataLabelsGroup.hide();
that.dataLabel.show();

But it also hides my line, which I connect to the data value of the chart. Why is the line not displayed in highcharts? Here is my code:

// Mouseover handler
function(e) {
    var that = this;
    var series = this.series;
    console.log(series);

    for (var i = 0; i < series.data.length; i++) {
        var point = series.data[i];
        console.log(point)

        if (point == this) {
            console.log('yes');
            point.update({
                color: series.chart.options.colors[this.index]
            });
        } else {
            point.update({
                color: '#CCCCCC'
            });
        }
    }
    that.series.dataLabelsGroup.hide();
    that.dataLabel.show();

    return false;
}

jsfiddle http://jsfiddle.net/nyhmdtb8/11/

解决方案

You don't have to use svg elements directly, but you can hide all necessary data labels during the point updating.

Show data labels:

point.update({
                color: series.chart.options.colors[this.index],
                dataLabels: {
                  enabled: true
                }
              });

and hide data labels:

point.update({
                color: '#CCCCCC',
                dataLabels: {
                  enabled: false
                }
              });

example: http://jsfiddle.net/nyhmdtb8/12/

这篇关于为什么不在高层图中显示该行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！