根据完整日期在highcharts股票图表中的线性梯度

yizd12fk 于 2022-11-10 发布在 Highcharts

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

是否有任何地方可以在完整日期/年份上进行线性渐变
https://jsfiddle.net/0712nw3g/64/
例如，如果我在3个月缩放中移动/滚动图表，颜色梯度应与1年/所有相同

series: [{
    type: 'line',
    name: 'Volume',
    id: 'stock',
    data: volume,
    yAxis: 0,
    dataGrouping: {
      units: groupingUnits
    },
    lineWidth: 10,
    color: {
      linearGradient: [0, 0, this.plotWidth, 0],
      stops: [
        [0, '#26A69A'],
        [1, '#CE1510']
      ]
    },
  }
]

highcharts

来源：https://stackoverflow.com/questions/71552266/linear-gradient-in-highcharts-stockcharts-according-to-full-length-date

1条答案

按热度按时间

cyej8jka1#

您可以设置xAxis.events.afterSetExtremes选项来修改图形中的颜色渐变，但导航器中的颜色也会更改。https://jsfiddle.net/BlackLabel/j3ca7oyh/

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
  Highcharts.stockChart('container', {
    xAxis: {
      events: {
        afterSetExtremes: function() {
          const dataRange = this.dataMax - this.dataMin,
            currentRange = this.max - this.min

          this.series[0].update({
            color: {
              linearGradient: [0, 0, this.plotWidth, 0],
              stops: [
                [1 - currentRange / dataRange, 'blue'],
                [1, 'yellow']
              ]
            },
          })
        }
      }
    },
    series: [{
      name: 'AAPL',
      data: data,
      color: {
        linearGradient: [0, 0, this.plotWidth, 0],
        stops: [
          [0, 'blue'],
          [1, 'yellow']
        ]
      },
    }]
  });
});

另一种方法是在导航器中添加一个系列，并尝试计算渐变颜色。https://jsfiddle.net/BlackLabel/qLp61uft/

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
  Highcharts.stockChart('container', {
    xAxis: {
      events: {
        afterSetExtremes: function() {
          const dataRange = this.dataMax - this.dataMin,
            currentRange = this.max - this.min

          this.series[0].update({
            color: {
              linearGradient: [0, 0, this.plotWidth, 0],
              stops: [
                [0, 'red'],
                [1, 'yellow']
              ]
            },
          })
        }
      }
    },
    navigator: {
      series: {
        name: 'AAPL',
        data: data,
        fillColor: {
          linearGradient: [0, 0, this.plotWidth, 0],
          stops: [
            [0, 'blue'],
            [1, 'yellow']
          ]
        },
      }
    },
    series: [{
      name: 'AAPL',
      data: data,
      color: {
        linearGradient: [0, 0, this.plotWidth, 0],
        stops: [
          [0, 'blue'],
          [1, 'yellow']
        ]
      },
    }]
  });
});

赞(0）回复(0）举报 2022-11-10

我来回答

根据完整日期在highcharts股票图表中的线性梯度

1条答案

相关问题

热门标签

最新问答