Highcharts.js设置用于更改列颜色的阈值 [英] Highcharts.js setting a threshold value for changing column color

问题描述

我想知道是否有人可以帮我调整这张Highcharts折线图： http://jsfiddle.net/ / strong> / PMyHQ / 添加到列图 WHILE 仍然保持阈值着色（红色表示值> 0;蓝色表示值<0）。

问题是，如果只是简单地改变图的类型， type：'column'，那么基于阈值的着色就会丢失，所有的列都是蓝色的。 / p>

执行颜色更改的函数是 applyGraphGradient（）。
我无法弄清楚如何改变这个函数来保留基于阈值的着色。

  / ** 
 *用于在阈值以上和以下应用不同颜色的事件处理程序。 
 *目前这只适用于支持SVG的浏览器。 Highcharts 3.0的完整解决方案预计为
 *。在当前的例子中，数据是静态的，所以在修改数据后我们不需要
 *重新计算。在动态系列中，应该将相同的事件处理函数
 *添加到yAxis.events.setExtremes和其他可能的事件中，例如
 * chart.events.resize。 
 * / 
函数applyGraphGradient（）{
 
 //选项
 var threshold = 0，
 colorAbove ='＃EE4643'，
 colorBelow ='＃4572EE'; 
 
 //内部
 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会很好，但IE9需要2 
 
 //将渐变应用于路径
 series.graph.attr（{
 stroke：{
 linearGradient： [0，y1，0，y2]，
停止：[
 [0，colorAbove]，
 [1，colorBelow] 
] 
} 
 }）; 
 
 
 
 
 //为（i = 0; i< series.data.length; i ++）{ 
 point = series.data [i]; 
 point.color = point.y<门槛？ colorBelow：colorAbove; 
 if（point.graphic）{
 point.graphic.attr（{
 fill：point.color 
}）; 
} 
} 
 
 //防止悬停后旧的颜色回来
 delete series.pointAttr.hover.fill; 
 delete series.pointAttr ['']。fill; 
 
 
 
 //启动图表
 var chart = new Highcharts.Chart（{
 
图表：{
 renderTo：'container'，
 events：{
 load：applyGraphGradient 
}，
 defaultSeriesType：'column'
}，
 
 title ：{
 text：'每月平均温度'
}，
 
 y轴：{
 plotLines：[{
 value：0，
颜色：'银'，
宽度：2，
 zIndex：2 
}]，
标题：{
 text：'Temperature（°C）'
 
 $ x 
 $ b xAxis：{
 categories：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun' ，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'] 
}，
 
系列：[{
 name：'温度（°C）'，
数据：[-2，-3，-2，2,5,9,11,11,10,8,4,1] 
}] 
 
}）; 
 
  

解决方案

使用Highcharts绘图API，它也可以在VML浏览器中工作： http://jsfiddle.net/highcharts/XndxH/

I'm wondering if someone can help me adapt this Highcharts line graph: http://jsfiddle.net/highcharts/PMyHQ/ to a column graph WHILE still maintaining the threshold coloring (red for value>0; blue for value<0).

The problem is if you simply change the graph type, type:'column', then the threshold-based coloring is lost and all the columns are blue.

The function that does the color change is applyGraphGradient(). I can't figure out how to change this function to preserve the threshold-based coloring.

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

});
​

解决方案

Use the Highcharts drawing API, and it will work in VML browsers as well: http://jsfiddle.net/highcharts/XndxH/

这篇关于Highcharts.js设置用于更改列颜色的阈值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！