Question

你能告诉我如何在highcharts中显示鼠标悬停的数据标签吗？实际上我想在所选项目上显示数据标签并隐藏其他数据标签。换句话说，如果我将鼠标悬停在任何切片上，它会显示数据标签并隐藏其他数据标签

$(function() {
var colors= [
                 '#0066FF', 
                 '#33CC33', 
                 '#FF0000',
                 '#FFFF00',
            ];
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },

    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    legend: {

      symbolHeight: 1,
      symbolWidth: 1,
      symbolRadius: 0,
      useHTML: true,
      align: 'right',
      verticalAlign: 'top',
      itemWidth: 100,
      layout: 'vertical',
      x: 0,
      y: 100,
      labelFormatter: function() {

        return '<div style="padding:5px;width:55px;background-color:' + this.color + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
      }
    },
    yAxis: {
      title: {
        text: 'Total percent market share'
      }
    },
                  plotOptions: {

                      pie: {
                  showInLegend: true,
                         dataLabels: {
                        format: '<b>{point.y}</b>',

                        style: {
                            fontWeight: 'bold',
                            color: 'white'
                        }
                    },
            point: {
                events: {
                    legendItemClick: function () {
                    return false;
                    },
                    mouseOver: function(e) {
                 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'
                    });
                }
            }

            return false;
        },
                mouseOut: function(e) {
                 var series = this.series;
                console.log(series)
               for (var i = 0; i < series.data.length; i++) {
                var point = series.data[i];
               point.update({color: series.chart.options.colors[i]});

            }

            return false;
        }

                }
              },
                   startAngle: 0,
                  endAngle: 270,
            }
            },
    tooltip: {
      enabled: false,
      shadow: false
    },
    series: [{
      states: {
        hover: {
          enabled: false
        }
      },
      showInLegend: false,
      name: 'election result',
      enabled: true,
      dataLabels: {
        enabled: true
      },
      data: [
        ['A', 55],
        ['B', 65],

      ],
      size: '30%',
      innerSize: '70%',
    }, {
      states: {
        hover: {
          enabled: false
        }
      },
      name: 'Versions',
      data: [
        ['sdsd', 55],
        ['sdf', 65],
        ['sdf', 65],
        ['sdf', 132],

      ],
      size: '70%',
      innerSize: '80%',

    }]
  },function(chart){
                      $(chart.series[1].data).each(function(i, serie) {
            $(serie.legendItem.element).hover(function() {
            //  alert('--dd--')
             mouseOverEvent(chart.series[1].data, serie.index, true);
            }, function() {
               alert('----');
               mouseOutEvent(chart.series[1].data, serie.index);
           });
       });
            function mouseOverEvent(series, index, hide) {
               for (var i = 0; i < series.length; i++) {
                if (index == i) {
                     series[i].update({color: colors[i]});
                } else {
                    series[i].update({
                        color: '#CCCCCC'
                    });
                }
            }

            }
                      function mouseOutEvent(series, index, hide) {
               for (var i = 0; i < series.length; i++) {
                     series[i].update({color:colors[i]});
            }

            }
  });

});

例如，如果我将鼠标悬停在蓝色切片上。它只显示55个数据标签，其余部分将隐藏，当我再次将鼠标移出所有标签时显示

Answer 1

使工具提示启用为true而不是false，即

tooltip: {
  enabled: true,
  shadow: false
},

如何在highcharts中显示鼠标上的数据标签？

1 个答案: