Question

我需要用highcharts绘制多边形。问题是我需要一个工具提示和整个多边形的鼠标悬停效果。要了解我想要实现的目标，请查看此fiddle。

Highcharts.chart('container', {
    chart: {
        type: 'column',
        zoomType: 'x'
    },
    xAxis: [{
        categories: [
            'Jan 17',
            'Feb 17',
            'Mar 17',
            'Apr 17',
            'May 17',
            'Jun 17',
            'Jul 17',
            'Aug 17',
            'Sep 17',
            'Oct 17',
            'Nov 17',
            'Dec 17'
        ]
    }],
    series: [
    {
        type: 'area',
        data: [150,140,140, 140, 150, 150,100, 100,150, 150,150, 150],
        color: '#ababab',
        step: 'left',
        marker: {
          enabled: false
        }
    }]
});

您注意到每个点都有一个工具提示。我想要的是一个工具提示，显示在该图的中上方位置。而且我还需要你可以从柱形图中知道的鼠标悬停效果。我想用highcharts默认的api是不可能的，是吗？有人试图做这些事吗？

Answer 1

Highcharts提供多边形类型的系列，其中工具提示不遵循边界。将它与tooltip.positioner一起使用可以帮助您实现所需的效果：

var chart = Highcharts.chart('container', {

  chart: {
    type: 'polygon'
  },

  series: [{
    data: [
      [1, 3],
      [2, 6],
      [4, 1]
    ]
  }],

  tooltip: {
    positioner: function() {
      return {
        x: 300,
        y: 100
      }
    }
  }
});

现场演示： http://jsfiddle.net/kkulig/go9umtfn/

API参考： https://api.highcharts.com/highcharts/tooltip.positioner

用highcharts绘制多边形

1 个答案: