自定义highcharts angular中波段的工具提示

7hiiyaii 于 2023-03-30 发布在 Highcharts

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

我正在尝试自定义Angular 的highcharts图表中的波段名称。下面是相同的代码片段。但是它返回了未定义的波段名称。
下面是工作中的code
以下是波段绘图的代码片段

{
   name: 'Band',
   type: 'area',
   data: [{
     x: currentlyAchievableChartData.bar_graph_min,
     y: 2
   }, {
     x: currentlyAchievableChartData.bar_graph_max,
     y: 2
   }, {
     x: currentlyAchievableChartData.bar_graph_max,
     y: -2
   }, {
     x: currentlyAchievableChartData.bar_graph_min,
     y: -2
   }],
   color: 'rgba(192,192,192,0.5)', // set the band color to transparent grey
   fillOpacity: 1, // set the opacity of the band fill to 1
   lineWidth: 0, // hide the line connecting the band points
   borderRadius: 10 // set the corner radius of the band to 10 pixels
 },

在本例中，您可以看到一个波段被绘制为bar_graph_min到bar_graph_max。工具提示显示的值从Band：224000开始，到Band：313600结束。我需要将其显示为
波段开始：22400
和
结束开始：313600
作为工具提示。此外，它应该显示在通过带中心的线上。目前，它显示在角落里。

highcharts

来源：https://stackoverflow.com/questions/75853782/customize-tooltip-for-bands-in-highcharts-angular

1条答案

按热度按时间

dzjeubhm1#

您可以将name属性添加到第一个系列数据并调整工具提示格式化程序。此外，将findNearestPointBy设置为'xy'以在所有角落显示工具提示。

Highcharts.chart('container', {
   ...,
   tooltip: {
     formatter: function() {
       if (['Propery Price', 'Band'].includes(this.series.name)) {
         return this.point.name + ': ' + this.x;
       } else
         return this.series.name + ': ' + this.x;
     }
   },
   series: [{
       name: 'Band',
       type: 'area',
       findNearestPointBy: 'xy',
       data: [{
         x: currentlyAchievableChartData.bar_graph_min,
         y: 2,
         name: 'Band Start'
       }, {
         x: currentlyAchievableChartData.bar_graph_max,
         y: 2,
         name: 'Band End'
       }, {
         x: currentlyAchievableChartData.bar_graph_max,
         y: -2,
         name: 'Band Start'
       }, {
         x: currentlyAchievableChartData.bar_graph_min,
         y: -2,
         name: 'Band End'
       }],
       ...
     },
     {
       name: 'Propery Price',
       ...
     },
     {
       name: 'Estimated Achievable Property Value - Med',
       ...
     }
   ]
 });

实时演示：https://jsfiddle.net/BlackLabel/ugsqoxc5/
API参考：https://api.highcharts.com/highcharts/series.area.findNearestPointBy

赞(0）回复(0）举报 2023-03-30

我来回答

自定义highcharts angular中波段的工具提示

1条答案

相关问题

热门标签

最新问答