2

时间线图中有没有办法根据 y 的值从一个点到另一个点填充不同的颜色？

在这个例子中http://jsfiddle.net/highcharts/PMyHQ/

我想应用以下规则：

  1. y <= 2 = 填充颜色为蓝色
  2. y <= 5 = 填充颜色为红色
  3. y <= 9 = 填充颜色为黄色

所以：

  1. 4 月至 5 月区域颜色应为蓝色
  2. 5 月至 6 月区域颜色应为红色
  3. 六月至七月区域颜色应为黄色

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 坐标为界）应用不同颜色的功能，也许在未来的版本中？

4

0 回答 0