Question

有什么方法可以将工具提示添加到高图中的stackedLabels中，如以下示例所示：我的堆叠名称为男性和女性，但在图表底部没有显示它们。.如果它们是长名称，我要添加省略号，在这种情况下，有一种方法可以在悬停时查看全名里面的工具提示？小提琴： http://jsfiddle.net/rq8m7e0v/

代码：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', "getete"]
    },
    yAxis: {
        min: 0,
     
       
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
          verticalAlign: 'bottom',
          y:90,
            enabled: true,
            formatter: function() {
              return this.stack;
            }
          
        }
    },
 
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            }
        }
    },
 series: [{
          name: 'John',
          data: [53, 33, 43,63,7,83],
          stack: 'male'
        }, {
          name: 'Joe',
          data: [33, 43,43,63,73,8],
          stack: 'female'
        }, {
          name: 'Jane',
          data: [42, 54,43,62,74,84],
          stack: 'male',
        
        }, {
          name: 'Janet',
          data: [34, 40, 42,36,74,83],
          stack: 'female',
        }]
});

Answer 1

Highcharts没有用于堆栈标签的内置工具提示，但是您仍然可以为此创建自己的工具提示。将自定义事件添加到legendItem（例如，鼠标悬停和鼠标移出）并显示该工具提示很简单。

events: {
  load: function() {
    var stackLabels = this.yAxis[0].stacking.stackTotalGroup.element.children,
      somePoint = this.series[0].points[0],
      chart = this;

    for (let i = 0; i < stackLabels.length; i++) {
      stackLabels[i].addEventListener('mouseover', function() {
        // show custom tooltip
      });
    }
  }
}

实时演示： http://jsfiddle.net/BlackLabel/orqyLjct/

API： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

如何在悬停在高脚车上的堆叠标签上添加工具提示

1 个答案: