Question

在时间线图表中是否有办法从一个点到另一个点填充不同的颜色，具体取决于y的值？

在此示例http://jsfiddle.net/highcharts/PMyHQ/

中

我想应用以下规则：

y＆lt; = 2 =填充颜色为蓝色
y＆lt; = 5 =填充红色
y＆lt; = 9 =填充黄色

所以：

四月到五月区域颜色应为蓝色
5月至6月区域颜色应为红色
6月至7月区域颜色应为黄色

jsfiddle代码：

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]
}]

});

是否有计划支持在折线图中对特定区域（以x和y坐标为界）应用不同颜色的能力，可能是为了将来的版本？

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

0 个答案: