首页 > 解决方案 > Highcharts 列改变颜色,但标记/点不改变

问题描述

我正在创建 highchart 列我正在更改颜色条,但标记/点没有改变。

我希望标记/点与彩条相同

进度:橙色

完成:绿色

目标:蓝色

不知道怎么解决,看这张图

在此处输入图像描述

查看我的演示Jsfiddle

这是我的代码

$(function () {
              $('#sales').highcharts({
                  chart: {
                      type: 'column'
                  },
                  title: {
                      text: 'Performance Sales'
                  },
                  xAxis: {
                      categories: ['Yulia','UUM','Sinta']
                  },
                  yAxis: {
                      min: 0,
                      title: {
                          text: 'Values'
                      }
                  },
                   credits: {
                        enabled: false
                    },
                  plotOptions: {
                      column: {
                          dataLabels: {
                              enabled: true,
                              formatter: function () {
                                  return this.point.custom;
                              }
                          },
                      },

                  },
                  series: [ 
                  {
                      name: 'Progress',
                      data: [
                             {
                              color:'orange',
                              custom:17,
                              y:16150000
                            },
                            {
                                color:'orange',
                                custom:4,
                                y:195449100
                             },
                            {
                              color:'orange',
                              custom:16,
                              y:128000000
                            }
                          ]
                  },
                  {
                      name: 'Done',
                      data: [
                        {
                           color:'#90ED7D',
                           custom:16,
                           y:9000000
                        },{
                          color:'#90ED7D',
                          custom:0,
                          y:0
                        },
                        {
                           color:'#90ED7D',
                           custom:8,
                           y:128000000
                        }                     
                      ]
                  },
                  {
                      name: 'Target',
                      data: [
                        {
                          color:'#7CB5EC',
                          custom:'',
                          y:50000000
                        },
                        {
                          color:'#7CB5EC',
                          custom:'',
                          y:30000000
                        },
                        {
                            color:'#7CB5EC',
                            custom:'',
                            y:70000000
                        }                    
                        ]
                  }
                  ]
              });
          });

标签: highcharts

解决方案


您需要为整个系列设置此颜色,而不仅仅是针对特定点。图例颜色继承自系列颜色。

演示:https ://jsfiddle.net/BlackLabel/vsud1nky/

series: [{
    color: 'orange',
    name: 'Progress',
    data: [{
        custom: 17,
        y: 16150000
      },
      {
        custom: 4,
        y: 195449100
      },
      {
        custom: 16,
        y: 128000000
      }
    ]
  }....
]

API:https ://api.highcharts.com/highcharts/series.column.color


推荐阅读