Question

如果您看到下面的示例，当您将鼠标悬停在这些点上时，工具提示将位于该点的左侧，除非您将鼠标悬停在“六月”月份，此处只有一个值。

当我将鼠标悬停在单个点上具有多个值的点上时，以及当我将鼠标悬停在只有1个值的点上时，我试图让工具提示显示在相同的位置。（这是一个共享的工具提示）。

任何想法如何使单值工具提示的行为与其他工具提示相同？

Highcharts.chart('container', {
	  
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                                 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
		plotOptions: {
    series: {
    	connectNulls: true
      }
    },
    tooltip: {
        shared: true,
        crosshairs: true
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [216.4, 194.1, 95.6, 54.4, 29.9, null, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Answer 1

正如我在评论中提到的，你应该能够使用tooltip.positioner将你的工具提示定位在你的点附近：

http://api.highcharts.com/highcharts/tooltip.positioner

  tooltip: {
    shared: true,
    crosshairs: true,
    positioner: function(labelWidth, labelHeight, point) {
      var x;
      if (point.plotX - labelWidth / 2 > 0) {
        x = point.plotX - labelWidth / 2;
      } else {
        x = 0
      }
      return {
        x: x,
        y: point.plotY
      }
    },
    shape: 'square'
  },

实例：http://jsfiddle.net/2paj7L0h/2/

Answer 2

那是因为你在第二个数据数组的6月份放了一个null值，如果你输入了正确的值，月份将正确匹配

Highcharts.chart('container', {
	  
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                                 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
		plotOptions: {
    series: {
    	connectNulls: true
      }
    },
    tooltip: {
        shared: true,
        crosshairs: true
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Highcharts仅在单个值

2 个答案: