【问题标题】:Highchart Pie Chart click on hoverHighchart饼图点击悬停
【发布时间】:2012-10-04 13:33:15
【问题描述】:

如何在鼠标悬停时在饼图上调用鼠标单击事件? 我尝试了一些东西,但它的点击并不像我需要的那么顺利。 这是代码示例:

   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();
                    }
                }
            }
        }
    },

【问题讨论】:

    标签: jquery highcharts pie-chart


    【解决方案1】:

    如果您真正想要做的只是选择 mouseOver 上的点(我需要做的就是让我提出您的问题),您可以在 mouseOver 函数中调用 this.select(true) 。这没有超时延迟,但仍然可以添加。

    【讨论】:

      【解决方案2】:

      谢谢你,伊戈尔!

      是的,它对我帮助很大,但它和我自己一样有一些缺点:如果你将鼠标多次移动到图表上,它会反复来回移动,尤其是在 Donut 图表上可见。

      这里是sn-p的代码:

      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();
                          }
                      }
                  }
              }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-11-10
        • 1970-01-01
        • 2023-03-20
        • 1970-01-01
        • 1970-01-01
        • 2013-06-07
        • 2015-05-07
        • 2020-10-07
        相关资源
        最近更新 更多