highcharts 如何使用角形图显示损益指示线?

mm9b1k5b  于 2023-10-20  发布在  Highcharts
关注(0)|答案(1)|浏览(112)

大家好,我想创建一个图表在Angular 使用highchart,这表明升级和降级流的利润和损失。有没有人有想法,我怎么才能做到这种情况?
下面是我创建的stackblitz示例。Stackblitz
Chart image that I want to create

hl0ma9xz

hl0ma9xz1#

默认情况下,Highcharts中不提供此功能,其实现可能相当费力。但是,我已经创建了一个概念证明,您可以基于它。主要的概念包括在主系列上利用mouseOver事件,并使用某些侧面设置来操纵颜色。在第二个系列中,我使用了假数据作为例子。

series: [{
     type: 'areaspline',
     data: data,
     tooltip: {
       valueDecimals: 4,
     },
  
     fillColor: {
       linearGradient: {
         x1: 0,
         x2: 0.5,
         y1: 0,
         y2: 0.9
       },
       stops: [
         [0, 'rgba(232, 54, 54, 0.24)'],
         [
           1,
           Highcharts.color('#FF0000').setOpacity(0.0).get('rgba'),
         ],
       ],
     },
   }, {
     type: 'areaspline',
     enableMouseTracking: false,
     states: {
       inactive: {
         enabled: false
       }
     },
     data: profi,
     color: 'transparent',
     fillColor: 'transparent'
   }],

plotOptions:{
  zoneAxis: 'x',
  series: {
       point: {
         events: {
           mouseOver() {
             let hoveredPoint = this,
               series1 = hoveredPoint.series,
               series2 = hoveredPoint.series.chart.series[1],
               hoveredIndex = hoveredPoint.index,
               chart = this.series.chart,
               series1leftZone = {
                 value: hoveredPoint.x,
                 fillColor: {
                   linearGradient: {
                     x1: 0,
                     x2: 0.5,
                     y1: 0,
                     y2: 0.9,
                   },
                   stops: [
                     [0, 'rgba(232, 54, 54, 0.44)'],
                     [1, Highcharts.color('#FF0000').setOpacity(0.0).get('rgba')],
                   ],
                 },
               },
               series1rightZone = {
                 color: 'transparent',
                 fillColor: 'transparent',
               };

             series1.update({
                 zones: [series1leftZone, series1rightZone],
               },
               false
             );

             let series2leftZone = {
                 color: 'transparent',
                 fillColor: 'transparent',
               },

               series2rightZone = {
                 value: series2.data[hoveredIndex].x,
                 color: 'greeen',
                 fillColor: {
                   linearGradient: {
                     x1: 0,
                     x2: 0.5,
                     y1: 0,
                     y2: 0.9,
                   },
                   stops: [
                     [0, 'rgba(54, 255, 54, 0.44)'],
                     [1, Highcharts.color('#00FF00').setOpacity(0.0).get('rgba')],
                   ],
                 },
               };

             series2.update({
                 zones: [series2leftZone, series2rightZone],
               },
               false
             );

             chart.redraw();
           }
         }
       },
       ...
     }
   }
}

Demo:https://jsfiddle.net/BlackLabel/kLcut3gr/
API引用:https://api.highcharts.com/highcharts/series.areaspline.events.mouseOver

相关问题