highstock蜡烛图设置crosshair渐变色

最新推荐文章于 2023-12-25 15:09:35 发布

Orange301511

最新推荐文章于 2023-12-25 15:09:35 发布

阅读量621

点赞数

分类专栏：大前端文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/LQS5858/article/details/124636248

版权

大前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

该博客介绍了如何在Highstock的蜡烛图中实现轴线十字准线颜色的渐变效果。通过使用Highcharts.addEvent()方法和afterDrawCrosshair事件，调整crosshair属性，设置线性渐变色，从而为图表增添视觉吸引力。示例代码和在线演示链接提供了详细的实现步骤。

摘要由CSDN通过智能技术生成

问题描述：highstock使用蜡烛图不能设置Axis的crosshair的渐变色

解决方案：

需要调用方法addEvent()，参考如下代码：

Highcharts.chart('container', {
  chart: {
    type: 'candlestick'
  },
  
  title: {
    text: ''
  },
  xAxis: {
    crosshair: {
      color: {
        linearGradient: {
          x1: 0,
          x2: 0,
          y1: 1,
          y2: 0
        },
        stops: [
          [0, 'red'],
          [1, 'blue']
        ]
      }
    }
  },
 
  series: [{
   
    color: 'green',
    lineColor: 'green',
    upColor: 'red',
    upLineColor: 'red',
    data: [
      [1317888000000, 372.5101, 375, 372.2, 372.52],
      [1317888060000, 372.4, 373, 372.01, 372.16],
      [1317888120000, 372.16, 372.4, 371.39, 371.62],
      [1317888180000, 371.62, 372.16, 371.55, 371.75],
      [1317888240000, 371.75, 372.4, 371.57, 372],
      [1317888300000, 372, 372.3, 371.8, 372.24],
      [1317888360000, 372.22, 372.45, 372.22, 372.3],
      [1317888420000, 372.3, 373.25, 372.3, 373.15],
      [1317888480000, 373.01, 373.5, 373, 373.24],
      [1317888540000, 373.36, 373.88, 373.19, 373.88],
      [1317888600000, 373.8, 374.34, 373.75, 374.29],
      [1317888660000, 374.29, 374.43, 374, 374.01],
      [1317888720000, 374.05, 374.35, 373.76, 374.35],
      [1317888780000, 374.41, 375.24, 374.37, 374.9],
    ]
  }]
});

Highcharts.addEvent(Highcharts.Axis, 'afterDrawCrosshair', function(point) {
    if (this.cross) {

      let path = this.cross.pathArray;
      path[1][1] += 0.001;
      this.cross.attr({
        d: path
      })
    }
  });