Highchart饼图点击悬停

时间:2012-10-04 13:33:16

标签: jquery highcharts pie-chart

如何在鼠标悬停时在饼图上调用鼠标点击事件? 我尝试了一些东西,但它确实点击不太顺利,因为我需要。 这是代码示例:

   plotOptions: {
        pie: {
            innerSize: '50%',
            size: 100,
            cursor: 'pointer',
            dataLabels: false
        },
        series: {
            allowPointSelect: true,
            type: 'pie',
            name: 'Coordinates',
            point: {
                events: {
                    mouseOver: function (e) {
                      pieChart.tooltip.hide();
                        var serie = this.series.data[this.x];
                        var waitBeforeSelect = setTimeout(function () {
                            clearTimeout(waitBeforeSelect);
                            serie.select();
                            serie.series.show();
                            pieChart.tooltip.refresh(serie);
                        }, 500);

                        var serieName = serie.name;
                        var textToShow = serieName.substr(0, serieName.indexOf(';'));
                        $('#pieChartInfoText').children().text(textToShow);
                        $('#pieChartInfoText').children().css('color', serie.color);
                    },
                    mouseOut: function () {
                        pieChart.tooltip.hide();
                    }
                }
            }
        }
    },

3 个答案:

答案 0 :(得分:2)

你在这里:http://jsfiddle.net/XErNG/2/

我认为这个例子可以满足您的需求。

答案 1 :(得分:1)

如果您真正尝试做的只是选择mouseOver上的点(我需要做什么导致我的问题),您可以在mouseOver函数中调用this.select(true)。这没有超时延迟,但仍可以添加。

答案 2 :(得分:0)

谢谢你,伊戈尔。 是的它对我有很大的帮助,但它因为我自己有一些缺点(如果你多次将鼠标移到图表上,它会反复来回,尤其是在圆环图上可见),但是我修复了它。这就是代码片段:

series: {
            allowPointSelect: true,
            type: 'pie',
            name: 'Coordinates',
            point: {
                events: {
                    mouseOver: function (e) {
                        var serie = this.series.data[this.x];
                        if ((undefined == previousSerie) || (serie != previousSerie)) {
                            var point = this;

                            if (!point.selected) {
                                pieChart.tooltip.shared = true;

                                var timeout = setTimeout(function () {
                                    clearTimeout(timeout);
                                    point.firePointEvent('click');

                                    pieChart.tooltip.shared = false;
                                    pieChart.tooltip.refresh(point);
                                }, 700);
                            }

                            var serieName = serie.name;
                            var textToShow = serieName.substr(0, serieName.indexOf(';'));
                            $('#pieChartInfoText').children().text(textToShow);
                            $('#pieChartInfoText').children().css('color', serie.color);
                            previousSerie = serie;
                        } else {
                            previousSerie = serie;
                        }
                    },
                    mouseOut: function () {
                        //  pieChart.tooltip.hide();
                    }
                }
            }
        }

再次感谢。