Highchart - 颜色取决于值答案

【问题标题】：Highchart - colors depending on valuesHighchart - 颜色取决于值
【发布时间】：2016-06-08 10:26:18
【问题描述】：

我想根据它们的值为条形图指定颜色。

例如，如果您的条形值为 5000，则颜色应为深红色，与 3000 的颜色相似，比 5000 条形值的暗度低，依此类推...

我想在所有条形上方添加总空间，例如 100TB（我的条形值上的一些文本）

可用性条形图

 $(function () {
     $('#container').highcharts({
         chart: {
             type: 'column'
         },
         title: {
             text: 'Disk Utility'
         },
         subtitle: {
             text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Application Name</a>'
         },
         xAxis: {
             categories: ['Checkout', 'Hermes', 'Hybris', 'Marketplace', 'Mobile'],
             title: {
                 text: null
             }
         },
         yAxis: {
             min: 0,
             title: {
                 text: 'Used (TB)',
                 align: 'high'
             },
             labels: {
                 overflow: 'justify'
             }
         },
         tooltip: {
             valueSuffix: ' millions'
         },
         plotOptions: {
             column: {
                 dataLabels: {
                             enabled: true,
                             color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                             style: {
                                 textShadow: '0 0 3px black'
                             }
                         }
             }
         },
         legend: {
             layout: 'vertical',
             align: 'right',
             verticalAlign: 'top',
             x: -40,
             y: 80,
             floating: true,
             borderWidth: 1,
             backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
             shadow: true
         },
         credits: {
             enabled: false
         },
         series: [{
             data: [107, 311, 635, 203, 244]
         }]
     });
 });

Fiddle

【问题讨论】：

这一点不太清楚 >> 另外我想在所有条形上方添加 100TB 的总空间
请帮我整理更新的问题 1
你想增加空间 100 TB，意思是你想在列上方增加额外的空间？或者您想放置一些带有数据标签的文本以显示总共使用了多少以及剩余多少空间？
喜欢这个？ jsfiddle.net/Nishith/eooe2b8r/2
你是对的，但我想从数组中获取价值

标签： highcharts

【解决方案1】：

Here is updated fiddle

您可以在 plotoptions 中使用“区域”来定义范围和相关颜色，如下面的代码：

zones: [{
        value: 200,  
        color: '#bdbdbd'  
    },{
        value:300,
        color: '#ff0000'  
    },
    {
        value:500,
        color: 'blue'  
    },{
        value:800,
        color: 'black'  
    }]

【讨论】：