Highcharts per-column gradient并不总是有效

时间:2017-03-30 21:28:07

标签: highcharts highstock

我正在尝试创建一个图表,其中每列都分配了一个渐变。当屏幕尺寸较宽或显示的点数较少时,它可以正常工作。例如,显示一周价值点的移动视图可以正常工作,但显示一个月或三个月不会。它不是使用渐变而是切换回使用纯色。

这是一个jsfiddle链接,应该让它更清晰。如果您调整窗口的大小,您应该会看到图表中的颜色从具有自己的渐变的每个列更改为它们都是相同的纯色。

http://jsfiddle.net/12oqwvLj/

感谢您的帮助!
-Karl

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?', function (data) {
let answerData = data.map(dataPoint => {
    let endColor

    if ( dataPoint[1] > 28350555){
      endColor = 'red'
      } else {
      endColor = 'green'
      }

      return {
        x:dataPoint[0],
        y:dataPoint[1],
        color: {
            linearGradient: {
                x1: 0,
                x2: 0,
                y1: 0,
                y2: 1
            },
            stops: [
                [0, endColor],
                [1, 'yellow']
            ]
        },

    }
  })

// create the chart
Highcharts.stockChart('container', {
    chart: {
        alignTicks: false
    },

    rangeSelector: {
        selected: 1
    },
    plotOptions:{
    series:{
    turboThreshold: 0
    }
    },

    title: {
        text: 'AAPL Stock Volume'
    },

    series: [{
        type: 'column',
        name: 'AAPL Stock Volume',
        data: answerData

    }]
  });
});

0 个答案:

没有答案