2

誰かがこのHighcharts折れ線グラフを適応させるのを手伝ってくれるかどうか疑問に思っています:http://jsfiddle.net/highcharts/PMyHQ/を列グラフに、 まだしきい値の色を維持しながら(値> 0の場合は赤、値<0の場合は青) .

問題は、単にグラフ タイプを変更するとtype:'column'、しきい値に基づく色付けが失われ、すべての列が青色になることです。

色の変更を行う関数はapplyGraphGradient(). この関数を変更して、しきい値ベースの色を維持する方法がわかりません。

/**
 * Event handler for applying different colors above and below a threshold value. 
 * Currently this only works in SVG capable browsers. A full solution is scheduled
 * for Highcharts 3.0. In the current example the data is static, so we don't need to
 * recompute after altering the data. In dynamic series, the same event handler 
 * should be added to yAxis.events.setExtremes and possibly other events, like
 * chart.events.resize.
 */
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(this.plotHeight - 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 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
        },
        defaultSeriesType : 'column'
    },

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

});
​
4

3 に答える 3

5

Highcharts 描画 API を使用すると、VML ブラウザーでも動作します: http://jsfiddle.net/highcharts/XndxH/

于 2012-08-29T17:50:33.907 に答える
3

How about this:

function applyGraphGradient() {

    // Options
    var threshold = 0,
        colorAbove = '#EE4643',
        colorBelow = '#4572EE';

    // internal
    var someSeries = this.series[0];

    $.each(someSeries.points, function(){
        if (this.y < threshold)
        {
            $(this.graphic.element).attr('fill', colorBelow);
        }
        else
        {
            $(this.graphic.element).attr('fill', colorAbove );
        }
    });

    delete someSeries.pointAttr.hover.fill;
    delete someSeries.pointAttr[''].fill; 
}

See fiddle here.

于 2012-08-29T15:39:15.087 に答える
2

参照しているしきい値は 0 です。縦棒グラフの場合、次のように各バーの色を個別に設定できます。例

于 2012-08-29T15:10:10.183 に答える