是否可以在HighCharts的单个系列中使用不同颜色的图形?

Question

我有一个单一的序列列图，x轴为日期时间，y轴为某个常量值。我想根据我掌握的一些信息，用不同的颜色来显示这些列，可以吗?

。我有动态数据来画我的图，我用series.addPoint({x:x,y:value,extra:info}, false, false)来画同样的。根据这些信息，我如何改变颜色?

我是javascript和highcharts的新手。所以请原谅我的知识有限，任何正确方向上的帮助都将是感激的。

更新代码:

 if(type=='a')
    color='#7cb5ec';
else
    if(type=='b')
        color='#f45b5b';
    else
        if(type=='c')
            color='#8085e9';
        else
            if(type=='d')
                color='#2b908f';
            else
                color='#e4d354';
series.addPoint({x:x,y:value,extra:info,marker:{fillColor:color}}, false, false);

我还设置了colorByPoint: true选项。该系列。addPoint函数在循环中运行，当我获得数据时运行。

Answer 1

试试下面的

            plotOptions: {
                column: {
                    colorByPoint: true
                }
            },
            colors: [
                '#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', 
                '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'
            ],

小提琴链接:)

更新1:

动态系列小提琴:)

更新2:

使用下面的代码为特定的条设置特定的颜色

chart.series[0].addPoint({y: Math.random() * 100, color:'#659355'}, true, true);

Answer 2

您也可以将colorByPoint: true放在series选项中。

我在我的项目中就是这样做的，分享给关心的人。

plotOptions: {
      series: {
        pointWidth: 30,
        colorByPoint: true,
        dataLabels: {
          format: '{point.y:.0f}억원',
          enabled: true,
          align: 'right',
          color: '#FFFFFF',
          x: -5,
          y: 3,
          style: {
            fontSize: "16px",
            color: '#fff',
            fontWeight: '500',
          }
        }
      }
    },

Answer 3

colors: Array(3).fill().map(()=>`#${Math.floor(Math.random()*16777215).toString(16)}`)