ChartJS/High Charts 雷达图 – 每个类别的不同径向轴标签,在悬停时显示

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

ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover

问题

我想知道是否可能为每个类别标记不同的径向轴,在悬停在值上方时仅显示出来。可能最容易通过示例来解释。所以在这张图片中,“英语”的标记范围是50-100,在我悬停在该轴上的某个值时会弹出。

雷达图轴1

然后,当我悬停在“行为”类别上时,我想要发生的是该类别的径向轴标签会显示出来,并且这些标签会有不同的标记。

雷达图轴2

我知道这可能很难(或不可能)做到,但在ChartJS或HighCharts中是否有创造性的方式可以实现这一点呢?

谢谢!

英文:

I'm wondering if it's possible to label the radial axis' for each category differently which appear only when hovering over a value. Probably easiest to explain with an example. So in this picture, the "English" marks have a range of 50 -100 which pops up when I hover over one of the values on that axis

Radar chart axis 1

What I then want to happen is when i hover over the "Behaviour" category for example is the radial axis labels for that category to show up which are labelled differently.

Radar chart Axis 2

I know this might be difficult (or impossible) to do but is there a creative way in ChartJS or HighCharts where this might be possible?

Thanks!

答案1

得分: 0

这在 Highcharts 中是可能的。您只需要找到一个共同的刻度,使用多个 y 轴,并模拟标签和工具提示的值,例如:

  1. var yLabels = [
  2. [60, 70, 80, 90, 100],
  3. ['平均', '令人满意', '良好', '优秀', '卓越']
  4. ];
  5. Highcharts.chart('container', {
  6. yAxis: [...],
  7. xAxis: {
  8. lineWidth: 0,
  9. tickmarkPlacement: 'on',
  10. categories: ['英语', '行为', '物理', '化学', '生物', '历史']
  11. },
  12. tooltip: {
  13. shared: true,
  14. formatter: function() {
  15. var points = this.points,
  16. returnStr = this.x;
  17. points.forEach(function(point) {
  18. returnStr += (
  19. '<br />' + point.series.name + ': ' + yLabels[point.point.x][point.y - 1]
  20. );
  21. });
  22. return returnStr;
  23. }
  24. },
  25. plotOptions: {
  26. series: {
  27. point: {
  28. events: {
  29. mouseOver: function() {
  30. this.series.chart.yAxis[this.x].update({
  31. labels: {
  32. enabled: true
  33. }
  34. });
  35. },
  36. mouseOut: function() {
  37. this.series.chart.yAxis[this.x].update({
  38. labels: {
  39. enabled: false
  40. }
  41. }, false);
  42. }
  43. }
  44. }
  45. }
  46. },
  47. // ...
  48. });

在线演示: http://jsfiddle.net/BlackLabel/82dyogrp/

API 参考:

https://api.highcharts.com/highcharts/pane

https://api.highcharts.com/highcharts/yAxis

https://api.highcharts.com/highcharts/tooltip.formatter

英文:

This is possible with Highcharts. You need to only find a common scale, use multiple y-axis and mock labels and tooltip values, for example:

  1. var yLabels = [
  2. [60, 70, 80, 90, 100],
  3. [&#39;Average&#39;, &#39;Satisfactory&#39;, &#39;Good&#39;, &#39;Excellent&#39;, &#39;Outstanding&#39;]
  4. ];
  5. Highcharts.chart(&#39;container&#39;, {
  6. yAxis: [...],
  7. xAxis: {
  8. lineWidth: 0,
  9. tickmarkPlacement: &#39;on&#39;,
  10. categories: [&#39;English&#39;, &#39;Behaviour&#39;, &#39;Physics&#39;, &#39;Chemistry&#39;, &#39;Biology&#39;, &#39;History&#39;]
  11. },
  12. tooltip: {
  13. shared: true,
  14. formatter: function() {
  15. var points = this.points,
  16. returnStr = this.x;
  17. points.forEach(function(point) {
  18. returnStr += (
  19. &#39;&lt;br /&gt;&#39; + point.series.name + &#39;: &#39; + yLabels[point.point.x][point.y - 1]
  20. );
  21. });
  22. return returnStr;
  23. }
  24. },
  25. plotOptions: {
  26. series: {
  27. point: {
  28. events: {
  29. mouseOver: function() {
  30. this.series.chart.yAxis[this.x].update({
  31. labels: {
  32. enabled: true
  33. }
  34. });
  35. },
  36. mouseOut: function() {
  37. this.series.chart.yAxis[this.x].update({
  38. labels: {
  39. enabled: false
  40. }
  41. }, false);
  42. }
  43. }
  44. }
  45. }
  46. },
  47. ...
  48. });

Live demo: http://jsfiddle.net/BlackLabel/82dyogrp/

API Reference:

https://api.highcharts.com/highcharts/pane

https://api.highcharts.com/highcharts/yAxis

https://api.highcharts.com/highcharts/tooltip.formatter

huangapple
  • 本文由 发表于 2020年10月18日 11:07:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/64409335.html
匿名

发表评论

匿名网友

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

确定