如何使用角度高图显示盈亏指示线？

Question

大家好，我想使用 highchart 创建一个 Angular 图表，该图表指示了损益的升级和降级流程。有谁有想法，我怎样才能实现这种情况？

这是我创建的 stackblitz 示例。 堆栈闪电战

Answer 1

该功能在 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();
           }
         }
       },
       ...
     }
   }
}

演示： https://jsfiddle.net/BlackLabel/kLcut3gr/

API参考： https://api.highcharts.com/highcharts/series.areaspline.events.mouseOver