如何在柱形图中显示不同颜色的负值？答案

【问题标题】：How to show negative values different color in column chart?如何在柱形图中显示不同颜色的负值？
【发布时间】：2017-01-05 04:17:50
【问题描述】：

是否有可能在像this one 这样的柱形图中，我们可以让负值显示为红色？

"data": [
    {
        "label": "Week 1",
        "value": "14.5"
    }, 
    {
        "label": "Week 2",
        "value": "-6.5"
    },

JsFiddle

【问题讨论】：

标签： javascript fusioncharts

【解决方案1】：

有一些useful documentation on highlighting specific data here。

您需要在特定数据点上指定颜色属性。

"data": [
    {
        "label": "Week 1",
        "value": "14.5"
    }, 
    {
        "label": "Week 2",
        "value": "-6.5",
        "color": "#ff0000"
    }, 
    //...
]

Array.forEach() 函数可以帮助您处理此问题：

var theData = [
    {
        "label": "Week 1",
        "value": "14.5"
    }, 
    {
        "label": "Week 2",
        "value": "-6.5"
    }
];

// Magic is here:
theData.forEach(function(val) {
    if (val.value < 0) {         
        val.color = "#ff0000";
    }
});

Updated Fiddle

【讨论】：

【解决方案2】：

你可以指定displayValue属性：

"data": [
    {
        "label": "Week 1",
        "displayValue": '<font style="color:black;">14.5</font>', 
        "value": "14.5"
    }, 
    {
        "label": "Week 2",
        "displayValue": '<font style="color:red;">-6.5</font>', 
        "value": "-6.5"
    },

【讨论】：