仅当悬停在线条或图例上时才显示spiderweb的数据标签？ [英] Show datalabels for spiderweb only when hovered over the line or the legend?

问题描述

我正在按照Highcharts指南创建spiderweb图表。目前数据标签已启用。我想在加载时隐藏数据，并且只在用户悬停在线或悬停图例时才显示数据。我怎样才能做到这一点？

这里是我的JSFiddle的链接： http：/ /jsfiddle.net/mmaharjan/fqrvq3m8/

  $（function（）{
 
 $（'＃container'）。highcharts（{
 
图：{
 polar：true，
 type：'line'
}，
 
 title：{
 text：'Hello World'，
}，
 
窗格：{
 size：'80％'
} ，
 
 xAxis：{
 categories：['Sales'，'Marketing'，'Development'，'Customer Support'，
'Information Technology'，'Administration']， 
 tickmarkPlacement：'on'，
 lineWidth：0 
}，
 
 yAxis：{
 gridLineInterpolation：'polygon'，
 lineWidth： 0，
分钟：0，
最多：5，
 la bels：{
 enabled：false，
} 
}，
 plotOptions：{
 line：{
 dataLabels：{
 enabled：true 
} 
} 
}，
图例：{
 align：'center'，
 verticalAlign：'bottom'，
 layout：'垂直'
}，
 
系列：[{
 
名称：'分配预算'，
数据：[1，2，1，3， 4]，
 pointPlacement：'on'
}，{
 
名称：'实际支出'，
数据：[3,4,5,3,2 ]，
 pointPlacement：'on'
}] 
 
}）; 
}）; 
  

HTML：

 < script src =http://code.highcharts.com/highcharts.js>< / script> 
< script src =http://code.highcharts.com/highcharts-more.js>< / script> 
< script src =http://code.highcharts.com/modules/exporting.js>< / script> 
< div id =containerstyle =min-width：400px; max-width：600px; height：400px; margin：0 auto>< / div> 
  

解决方案

我的建议是使用事件 mouseOver 和 mouseOut 系列。这些将隐藏并显示数据标签。然后在构建图表时使用回调方法，您可以默认隐藏所有数据标签，并使用 mouseOver 和<$的功能添加用于悬停图例项目的附加事件c $ c> mouseOut 。

举例来说，在您的图表选项中您将拥有：

  plotOptions：{
 series：{
 dataLabels：{
 enabled：true 
}，
 events：{ 
 mouseOver：function（event）{
 //显示当前系列的所有数据标签
 $ .each（this.data，function（i，point）{
 point。 dataLabel.show（）; 
}）; 
}，
 mouseOut：function（event）{
 //隐藏当前系列的所有数据标签
 $ .each（this.data，function（i，point）{ 
 point.dataLabel.hide（）; 
}）; 
} 
} 
} 
} 
  

你的回调函数应该是：

$ p $ $（'＃container'）。highcharts（{
// Options .. 。
}，function（chart）{
//默认隐藏数据标签
$ .each（chart.series，function（i，series）{
$ .each series.data，function（i，point）{
point.dataLabel.hide（）;
}）;
}）;

//将事件添加到悬停传奇项目
$（'。highcharts-legend-item'）。hover（function（e）{
chart.series [$（this）.index（）]。onMouseOver（）; $ b （）;
}）;
}）;函数（）{
chart.series [$（this）.index（）]。


请参阅这个JSFiddle 作为一个完整的例子。

I am creating a spiderweb chart following the Highcharts guide. Currently data label are enabled. I want to hide the data on load and only show the data when the user hovers over the line or hovers overs the legend. How can I accomplish this?

Here is a link to my JSFiddle: http://jsfiddle.net/mmaharjan/fqrvq3m8/

$(function () {

    $('#container').highcharts({

        chart: {
            polar: true,
            type: 'line'
        },

        title: {
            text: 'Hello World',
        },

        pane: {
            size: '80%'
        },

        xAxis: {
            categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
                'Information Technology', 'Administration'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },

        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0,
            max: 5,
            labels: {
                enabled: false,
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            align: 'center',
            verticalAlign: 'bottom',
            layout: 'vertical'
        },

        series: [{

            name: 'Allocated Budget',
            data: [1, 2, 1, 3, 4],
            pointPlacement: 'on'
        }, {

            name: 'Actual Spending',
            data: [3, 4, 5, 3, 2],
            pointPlacement: 'on'
        }]

    });
});

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

解决方案

My suggestion is to use the events mouseOver and mouseOut of the series. These will hide and show the data labels. Then using the callback method when constructing the chart you can hide all the data labels by default and add additional events for hovering the legend items, utilizing the functionality of your mouseOver and mouseOut.

To illustrate, in your chart options you would have:

plotOptions: {
    series: {
        dataLabels: {
            enabled: true
        },
        events: {
            mouseOver: function(event) {
                // Show all data labels for the current series
                $.each(this.data, function(i, point){
                    point.dataLabel.show();
                });
            },
            mouseOut: function(event) {
                // Hide all data labels for the current series
                $.each(this.data, function(i, point){
                    point.dataLabel.hide();
                });
            }
        }
    }
}

And your callback function would be:

$('#container').highcharts({
    // Options...
}, function(chart) {
    // Hide data labels by default
    $.each(chart.series, function(i, series) {
        $.each(series.data, function(i, point){
            point.dataLabel.hide();
        });
    });

    // Add events for hovering legend items
    $('.highcharts-legend-item').hover(function(e) {
        chart.series[$(this).index()].onMouseOver();
    },function() {
        chart.series[$(this).index()].onMouseOut();
    });
});

See this JSFiddle for a complete example.

这篇关于仅当悬停在线条或图例上时才显示spiderweb的数据标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！