Highcharts：如何使共享的工具提示，即使系列不具有相同的X值？

00jrzges 于 2023-08-05 发布在 Highcharts

关注(0)|答案(1)|浏览(113)

简而言之：当散点图与柱形图的“x”值不同时，我想为柱形图和散点图创建一个共享的工具提示。
这是我的问题的一个最小可重复的例子：x1c 0d1x的数据
https://jsfiddle.net/Baruch_Levin/wo50t4us/15/
代码：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['USA', 'China'],
    },
    yAxis:[{}, {
    opposite: true
    }],
    tooltip: {
        shared: true
    },
    series: [
        {
            name: 'Corn',
            data: [406292, 260000],
            yAxis: 0
        },
        {
            name: 'Wheat',
            data: [51086, 136000],
            yAxis: 0
        },
        {
                name: 'Benchamrk prev year',
            type: "scatter",
            data: [[-.15,1],[.15,3],[.85,4],[1.15,1]],
            yAxis: 1,
        }
    ]
});

字符串
我使用散点图作为基准，以了解前一年的值。然后我想要一个共享的工具提示，它将向我显示：

USA: {some_value}
USA prev year: {some_value}
China: {some_value}
China prev year: {some value}

型
然后，我希望也在悬停，柱形图和散点图将被选中。
我怎么能这么做呢？
我看到了这个问题：Highcharts : Shared Tooltip for non-matching x values
但这对我没有帮助，因为jsfiddle没有显示如何在悬停时选择两个系列点等，我不确定“插值”是正确的解决方案，这是在2017年，也许现在有另一个解决方案......
提前感谢！

highcharts

来源：https://stackoverflow.com/questions/76652614/highcharts-how-to-make-shared-tooltip-even-when-series-doesnt-have-same-x-valu

1条答案

按热度按时间

3yhwsihp1#

要实现这一点，请应用tooltip.formatter并进行如下计算：

tooltip: {
    shared: true,
    formatter() {
      let category = this.key,
        tooltipText = '',
        a = [],
        b = [];

      this.series.chart.series.forEach(series => {
        let seriesName = series.name;
        series.points.forEach(point => {
          if (point.category === category || point.category < (this.point.x + 0.5) && point.category > (this.point.x - 0.5)) {

            if (typeof point.category !== 'number') {
              a.push(`<span>${point.category}: ${seriesName}: ${point.y}</span></br>`);
            }
            if (typeof point.category === 'number') {
              b.push(`<span>${point.series.name}: ${point.y}</span></br>`);
            }
          }
        })
      });

      for (let i = 0; i < a.length; i++) {
        tooltipText += `${a[i]} ${b[i]}`
      }
      return tooltipText;
        }
      },

字符串
此外，要删除不透明度，需要修改series.states

plotOptions: {
    series: {
      states: {
        inactive: {
          opacity: 1
        },
        hover: {
          enabled: false
        }
      }
    }
  },

型

演示：https://jsfiddle.net/BlackLabel/5vdnmrtw/
API引用：https://api.highcharts.com/highcharts/tooltip.formatter https://api.highcharts.com/highcharts/plotOptions.series.states

赞(0）回复(0）举报 2023-08-05

我来回答

Highcharts：如何使共享的工具提示，即使系列不具有相同的X值？

1条答案

相关问题

热门标签

最新问答