Highcharts:如何使共享工具提示即使系列没有相同的X值也能正常显示?

huangapple go评论112阅读模式
英文:

Highcharts: How to make shared tooltip even when series doesn't have same X value?

问题

以下是您要翻译的内容:

简而言之:当散点图的“x”值与柱状图不相同时,我想要为柱状图和散点图创建一个共享工具提示。

这是我的问题的一个最小可重现示例:
Highcharts:如何使共享工具提示即使系列没有相同的X值也能正常显示?

https://jsfiddle.net/Baruch_Levin/wo50t4us/15/

代码:

  1. Highcharts.chart('container', {
  2. chart: {
  3. type: 'column'
  4. },
  5. xAxis: {
  6. categories: ['USA', 'China'],
  7. },
  8. yAxis:[{}, {
  9. opposite: true
  10. }],
  11. tooltip: {
  12. shared: true
  13. },
  14. series: [
  15. {
  16. name: 'Corn',
  17. data: [406292, 260000],
  18. yAxis: 0
  19. },
  20. {
  21. name: 'Wheat',
  22. data: [51086, 136000],
  23. yAxis: 0
  24. },
  25. {
  26. name: 'Benchamrk prev year',
  27. type: "scatter",
  28. data: [[-.15,1],[.15,3],[.85,4],[1.15,1]],
  29. yAxis: 1,
  30. }
  31. ]
  32. });

我使用散点图作为基准,以了解上一年的值。
然后,我想要一个共享工具提示,将显示以下信息:

  1. USA: {一些值}
  2. 上一年的USA: {一些值}
  3. China: {一些值}
  4. 上一年的China: {一些值}

然后,我希望在悬停时,柱状图和散点图都会被选中。

我看到了这个问题:
https://stackoverflow.com/questions/46093144/highcharts-shared-tooltip-for-non-matching-x-values

但是这并没有帮助我,因为那里的jsfiddle没有显示如何在悬停时选择两个系列点等等。
而且我不确定“插值”是否是正确的解决方案,那是在2017年,也许现在有其他解决方案...

提前感谢!
1: https://i.stack.imgur.com/GBRio.png

英文:

In short: I want to make a shared tooltip for the column chart and scatter chart when the scatter chart doesn't have the same "x" values as the column chart.

This is a minimal reproducible example of my problem:
Highcharts:如何使共享工具提示即使系列没有相同的X值也能正常显示?

https://jsfiddle.net/Baruch_Levin/wo50t4us/15/

Code:

  1. Highcharts.chart('container', {
  2. chart: {
  3. type: 'column'
  4. },
  5. xAxis: {
  6. categories: ['USA', 'China'],
  7. },
  8. yAxis:[{}, {
  9. opposite: true
  10. }],
  11. tooltip: {
  12. shared: true
  13. },
  14. series: [
  15. {
  16. name: 'Corn',
  17. data: [406292, 260000],
  18. yAxis: 0
  19. },
  20. {
  21. name: 'Wheat',
  22. data: [51086, 136000],
  23. yAxis: 0
  24. },
  25. {
  26. name: 'Benchamrk prev year',
  27. type: "scatter",
  28. data: [[-.15,1],[.15,3],[.85,4],[1.15,1]],
  29. yAxis: 1,
  30. }
  31. ]
  32. });

I use the scatter plot as a benchmark, to know what was the values in the previous year.
Then I want a shared tooltip that will show me:

  1. USA: {some_value}
  2. USA prev year: {some_value}
  3. China: {some_value}
  4. China prev year: {some value}

Then I want that also in hover, the column chart AND the scatter plot will be selected.

How can I do that?

I saw this question:
https://stackoverflow.com/questions/46093144/highcharts-shared-tooltip-for-non-matching-x-values

But it doesn't help me, because the jsfiddle there doesn't show how to select on hover both series points etc'
And I am not sure "interpolation" is the right solution, and it was in 2017, maybe now there is another solution...

Thanks in advance!

答案1

得分: 1

为了实现这一点,请按照以下方式应用tooltip.formatter进行计算:

  1. tooltip: {
  2. shared: true,
  3. formatter() {
  4. let category = this.key,
  5. tooltipText = '',
  6. a = [],
  7. b = [];
  8. this.series.chart.series.forEach(series => {
  9. let seriesName = series.name;
  10. series.points.forEach(point => {
  11. if (point.category === category || point.category < (this.point.x + 0.5) && point.category > (this.point.x - 0.5)) {
  12. if (typeof point.category !== 'number') {
  13. a.push(`<span>${point.category}: ${seriesName}: ${point.y}</span></br>`);
  14. }
  15. if (typeof point.category === 'number') {
  16. b.push(`<span>${point.series.name}: ${point.y}</span></br>`);
  17. }
  18. }
  19. })
  20. });
  21. for (let i = 0; i < a.length; i++) {
  22. tooltipText += `${a[i]} ${b[i]}`
  23. }
  24. return tooltipText;
  25. }
  26. },

此外,为了去除不透明度,需要修改series.states

  1. plotOptions: {
  2. series: {
  3. states: {
  4. inactive: {
  5. opacity: 1
  6. },
  7. hover: {
  8. enabled: false
  9. }
  10. }
  11. }
  12. },

演示:
https://jsfiddle.net/BlackLabel/5vdnmrtw/

API 参考文档:
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/highcharts/plotOptions.series.states

英文:

To accomplish this, apply the tooltip.formatter with the calculations as follows:

  1. tooltip: {
  2. shared: true,
  3. formatter() {
  4. let category = this.key,
  5. tooltipText = &#39;&#39;,
  6. a = [],
  7. b = [];
  8. this.series.chart.series.forEach(series =&gt; {
  9. let seriesName = series.name;
  10. series.points.forEach(point =&gt; {
  11. if (point.category === category || point.category &lt; (this.point.x + 0.5) &amp;&amp; point.category &gt; (this.point.x - 0.5)) {
  12. if (typeof point.category !== &#39;number&#39;) {
  13. a.push(`&lt;span&gt;${point.category}: ${seriesName}: ${point.y}&lt;/span&gt;&lt;/br&gt;`);
  14. }
  15. if (typeof point.category === &#39;number&#39;) {
  16. b.push(`&lt;span&gt;${point.series.name}: ${point.y}&lt;/span&gt;&lt;/br&gt;`);
  17. }
  18. }
  19. })
  20. });
  21. for (let i = 0; i &lt; a.length; i++) {
  22. tooltipText += `${a[i]} ${b[i]}`
  23. }
  24. return tooltipText;
  25. }
  26. },

Additionally, to remove opacity, it will be necessary to modify series.states

  1. plotOptions: {
  2. series: {
  3. states: {
  4. inactive: {
  5. opacity: 1
  6. },
  7. hover: {
  8. enabled: false
  9. }
  10. }
  11. }
  12. },

Demo:
https://jsfiddle.net/BlackLabel/5vdnmrtw/

API References:
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/highcharts/plotOptions.series.states

huangapple
  • 本文由 发表于 2023年7月10日 17:54:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/76652614.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定