时间戳

首页 > 解决方案 > 周末如何更改条形图颜色？

javascript - 周末如何更改条形图颜色？

问题描述

当 xaxis 值为周末时，我想更改图表上条形柱的颜色。

这是我的数据示例：

[
  [
    1564034400000,
    291681
  ],
  [
    1564120800000,
    1533580
  ],
  [
    1564207200000,
    985398
  ],
  [
    1564293600000,
    451679
  ],
  [
    1564380000000,
    1051938459
  ],
  [
    1564466400000,
    1486601
  ],
  [
    1564552800000,
    1712150
  ],
  [
    1564639200000,
    1719820
  ],
  [
    1564725600000,
    2142532
  ],
  [
    1564812000000,
    1332015
  ]
]

我试过这个（）：

data.forEach(x => {              
            ndata.push([x.date, x.eApar]);    
            if(x.date.getDay()==0 || x.date.getDay()==6){
              bcolor="orange"
            }
            else
            {
              bcolor="";
            }
        });

然后在图表建筑上我有这个：

plotOptions: {
              series: {
                color: bcolor
              },
series: [{
          data: ndata,
          type: 'column',
        }],

但它会改变所有列的颜色。

我希望你能帮助我，谢谢！

标签： javascripthighcharts

解决方案

您可以尝试在两个不同的系列上设置数据（根据工作日或周末的日子缺少值），然后为每个系列定义颜色，如下所示：

series: [
{
    name: 'weekend',
    color: '#ffffff',
    data: [null, null, null, null, null, value, value]
}
];
 series: [
{
    name: 'weekdays',
    color: '#f20303',
    data: [value, value, value, value, value, null, null]
}
];

编辑：@eolsson 在这里给出的这个问题的答案有一个更好的解决方案：你如何更改 highcharts 柱形图中每个类别的颜色？. 给不同的点一个颜色属性，如下所示：

  data: [
  {y: 34.4, color: 'red'},     // this point is red
  21.8,                        // default blue
  {y: 20.1, color: '#aaff99'}, // this will be greenish
  20]

推荐阅读