Highcharts动态更改条形图颜色基于数值

Question

我正在使用JSON数据创建列类型的图表。这是我使用AJAX调用获取数据并绘制图表的JS函数。

function getChart(){
    var categorySeries = [];
    var dataSeries = [];            
    var url = "CallToControllerURL";

    $.getJSON(url, function(response) {             
        $.each(response, function(i, item) {
            categorySeries .push(response[i].dateVal);                  
            dataSeries.push(response[i].count);             
        });

        $('#chartDiv').highcharts({
            chart : {type : 'column'},
            title : {text : 'Date vs Count'},
            xAxis : {categories : categorySeries, crosshair : true},
            yAxis : {allowDecimals: false, min : 0, title : { text : 'Count'}},
            plotOptions : { column : {  pointPadding : 0.2, borderWidth : 0,    allowPointSelect: true  } },
            series : [ {name : 'Nbr of Records',data : dataSeries } ]
        });             
    });
}

如果某一天的计数大于一个特定值（比如10），我希望能够修改该日柱形图的颜色。

以下是传递给函数的JSON输入数据。

[{"id":3,"dateVal":"2015-11-12","count":6},{"id":2,"dateVal":"2015-11-11","count":8},{"id":1,"dateVal":"2015-11-10","count":5}]

有什么建议我可以这样做吗？

- Ninja

---

具体更改颜色还是一般性更改？如果两个条形图都超过10，它们可以同时为相同的颜色吗？ - Halvor Holsten Strand

是的，假设我在图表中有7个条形图来表示一周的数据。如果某一天的计数大于10，我希望该条形图的颜色为红色。对于所有小于10的值，使用不同的颜色或默认颜色都可以。 - Ninja

Answer 1

您可以使用颜色区域(API)，根据柱状图的值显示不同的颜色。

以下是一个示例，在值低于/高于10时显示不同的颜色(JSFiddle):

plotOptions: {
    column: {
        zones: [{
            value: 10, // Values up to 10 (not including) ...
            color: 'blue' // ... have the color blue.
        },{
            color: 'red' // Values from 10 (including) and up have the color red
        }]
    }
}

- Halvor Holsten Strand

---

如何更新多列中的几个列（特定值）？ - Satish Kumar

Answer 2

在解析器中，您可以替换以下内容：

$.each(response, function(i, item) {
        categorySeries .push(response[i].dateVal);                  
        dataSeries.push(response[i].count);             
    });

使用

$.each(response, function(i, item) {
    categorySeries.push(response[i].dateVal);
    if(response[i].count >= 10) {
        dataSeries.push({
        y: response[i].count,
        color: 'red'
      });
    }
    else {
        dataSeries.push(response[i].count);
    }
});

或者使用 区域。

- Sebastian Bochan

---

我之前尝试过类似的东西，但没有使用 Y 轴选项。现在我知道缺少了什么。这个可以工作，API 中的区域功能也是如此。 - Ninja

Answer 3

plotOptions: {
                column: {
                    zones: [
                        {
                            value: -1, 
                            color: 'red', 
                        },
                        {
                            color: 'green'//default color
                        },
                    ],
                },
            }

- Nayan Drakshapally

---

虽然这段代码可能解决了问题，但最好还是解释一下你的代码是如何解决该问题的。这样，未来的访客可以从您的帖子中学习，并将其应用到自己的代码中。SO不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能得到赞同。这些特点以及所有帖子都必须是自包含的要求，是 SO 平台的一些优点，这使它与论坛不同。你可以编辑以添加其他信息和/或使用源文档补充您的解释。 - ysf