2

タイムライン チャートで、y の値に応じて、あるポイントから別のポイントまで異なる色で塗りつぶす方法はありますか?

この例ではhttp://jsfiddle.net/highcharts/PMyHQ/

次のルールを適用したい:

  1. y <= 2 = 塗りつぶしの色は青
  2. y <= 5 = 赤で塗りつぶす
  3. y <= 9 = 黄色で塗りつぶす

そう：

  1. 4月から5月のエリアカラーはブルー
  2. 5月から6月のエリアカラーは赤
  3. 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 座標で囲まれた領域) に異なる色を適用する機能をサポートする予定はありますか?

4

0 に答える 0