Highchart - 颜色取决于数值 [英] Highchart - colors depending on values

问题描述

我想给一个条形的颜色取决于它们的值。

1. 例如，如果您的条形值为5000，那么颜色应该是深红色，类似于3000的颜色比5000的颜色更深，等等...




2. 我想添加100TB以上的总空间
   
   
   
   可用性条形图
   
   

     $（function（）{
    $（'＃container'）。highcharts（{
    chart：{
    type：'column'
   }，
    title：{
    text：'Disk Utility'
   }，
   字幕：{
    text：'来源：< a href =https：// en。 wikipedia.org/wiki/World_population\">应用程序名称< / a>'
   }，
    xAxis：{
   类别：['Checkout'，'Hermes'，'Hybris'，'市场'，'手机']，
    title：{
    text：null 
   } 
   }，
    yAxis：{
    min：0，
    title：{
    text：'使用（TB）'，
    align：'high'
   }，
   标签：{
   溢出：'justify'
   } 
   }，
    tooltip：{
    valueSuffix：'millions'
   }，
    plotOptions：{
    column：{
    dataLabels：{
    enabled：true，
   颜色：（Highcharts.theme&& Highcharts.theme.dataLabelsColor）|| 'white'，
    style：{
    textShadow：'0 0 3px black'
   } 
   } 
   } 
   }，
   图例： {
    layout：'vertical'，
    align：'right'，
    verticalAlign：'top'，
   x：-40，
   y：80，
    floating：true，
    borderWidth：1，
    backgroundColor :(（Highcharts.theme&& Highcharts.theme.legendBackgroundColor）||'#FFFFFF'），
    shadow：true 
    $，
   学分：{
   已启用：false 
   }，
    series：[{
    data：[107，311，635，203，244] 
   }] 
   }）; 
   }）; 
     

   在此输入代码
   

小提琴

解决方案

这里更新了小提琴

您可以使用plotoptions中的Zones来定义范围和相关颜色，如下面的代码所示：

 区域：[{
值：200，
颜色：'#bdbdbd'
 $ {
 value：300，
 color：'＃ff0000'
}，
 {
 value：500，
 color：'blue' 
}，{
值：800，
颜色：'black'
}] 
  

I want to give a color for bars depending on their values.

1. For example if you a bar value 5000 then the color should be Dark RED similar for 3000 less darker than 5000 bar values so on...

2. I want to add total space like 100TB above all bars(some text on my bar value)

   ` Availability Bar Chart

   $(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]
           }]
       });
   });
   

   enter code here

Fiddle

解决方案

Here is updated fiddle

You can use "Zones" in plotoptions to define a range and relevant color , as per code below :

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

这篇关于Highchart - 颜色取决于数值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！