Highcharts 在时间线图表中,从一个点到另一个点区域填充不同的颜色

Highcharts 在时间线图表中,从一个点到另一个点区域填充不同的颜色,highcharts,highstock,Highcharts,Highstock,在时间线图表中,是否有一种方法可以根据y的值从一个点填充到另一个点的不同颜色 在这个例子中 我想应用以下规则: 很遗憾,此选项不可用,但您只能按阈值设置颜色或更改负值的颜色,如示例中所示 function applyGraphGradient() { // Options var threshold = 0, colorAbove = '#EE4643', colorBelow = '#4572EE'; // internal var series = this.series

在时间线图表中,是否有一种方法可以根据y的值从一个点填充到另一个点的不同颜色

在这个例子中

我想应用以下规则:


  • 很遗憾,此选项不可用,但您只能按阈值设置颜色或更改负值的颜色,如示例中所示
    function applyGraphGradient() {
    
    // Options
    var threshold = 0,
        colorAbove = '#EE4643',
        colorBelow = '#4572EE';
    
    // internal
    var series = this.series[0], 
        i,
        point;
    
    if (this.renderer.box.tagName === 'svg') {
    
        var translatedThreshold = series.yAxis.translate(threshold),
            y1 = Math.round(series.yAxis.len - translatedThreshold),
            y2 = y1 + 2; // 0.01 would be fine, but IE9 requires 2
    
        // Apply gradient to the path
        series.graph.attr({
            stroke: {
                linearGradient: [0, y1, 0, y2],
                stops: [
                    [0, colorAbove],
                    [1, colorBelow]
                ]
            }
         });
    
    
    
        // Apply gradient to the area
        if (series.area) {
            series.area.attr({
                fill: {
                    linearGradient: [0, y1, 0, y2],
                    stops: [
                        [0, colorAbove],
                        [1, colorBelow]
                    ]
                }
             });
        }        
    }
    
    
    // Apply colors to the markers
    for (i = 0; i < series.data.length; i++) {
        point = series.data[i];
        point.color = point.y < threshold ? colorBelow : colorAbove;
        if (point.graphic) {
            point.graphic.attr({
                fill: point.color
            });
        }
    }
    
    // prevent the old color from coming back after hover
    delete series.pointAttr.hover.fill;
    delete series.pointAttr[''].fill;
    
    }
    
    // Initiate the chart
    var chart = new Highcharts.Chart({
    
    chart: {
        renderTo: 'container',
        events: {
            load: applyGraphGradient
        },
        type: 'area'
    },
    
    title: {
        text: 'Average monthly temperature'
    },
    
    yAxis: {
        plotLines: [{
            value: 0,
            color: 'silver',
            width: 2,
            zIndex: 2
        }],
        title: {
            text: 'Temperature (°C)'
        }
    },
    
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    
    series: [{
        name: 'Temperature (°C)',
        data: [-2, -3, -2, 2, 5, 9, 11, 11, 10, 8, 4, -1]
    }]
    
    });