负数的柱形图颜色范围和正数的不同颜色范围

Question

正在尝试构建一个柱形图，其中正值的颜色范围和负值的颜色范围不同。

例如，我的值越大颜色越“绿”，我想补充一点，如果数字小于零，那么它越小颜色越“红” ".

current situation image

这是我的代码：

Highcharts.chart('container', {
    colorAxis: [{
            min: 0,
        maxColor: '#1FA37B',
        minColor: '#B6E4D5',
    },{
            max: 0,
        maxColor: '#F0BACC',
        minColor: '#D1315D',
    }],
        xAxis: [{
        categories: [
    "Oct 2021",
    "Nov 2021",
    "Dec 2021",
    "Sep 2021",
    "Aug 2021",
    "Jul 2021",
    "Jun 2021",
    "May 2021",
    "Apr 2021",
    "Mar 2021",
    "Feb 2021",
    "Jan 2021"
  ],
        reversed: false,
        labels: {
            step: 1
        }
    }],
  "series": [
    {
      "data": [[8.00],[18.00],[-8.00],[28.00],[38.00],[-18.00],[ 48.00],[58.00],[-28.00],[68.00],[78.00],[88.00]
      ],
      "type": "column",
      "showInLegend": false
    }
  ],
  "numberSuffix": "%",
  "categoriesFont": "Arial",
  "categoriesFontSize": "12px",
  "yAxisFontSize": "14px",
  "colorByPoint": false,
  "appendWidth": 10,
  "chartData": [{"date": "2021-10-01"},{"date": "2021-11-01"},{"date": "2021-12-01"},{"date": "2021-09-01"},{"date": "2021-08-01"},{"date": "2021-07-01"},{"date": "2021-06-01"},{"date": "2021-05-01"},{"date": "2021-04-01"},{"date": "2021-03-01"},{"date": "2021-02-01"},{"date": "2021-01-01"}]
});

和 jsfiddle：https://jsfiddle.net/8569t3dr/1/

Answer 1

请注意，colorAxis 是按系列定义的，因此如果您想要多个 colorAxis（一个用于正值，一个用于负值），您需要将系列分成两个独立的对象.

演示：https://jsfiddle.net/BlackLabel/y4x36wmu/

API: https://api.highcharts.com/highcharts/series.line.colorAxis

负数的柱形图颜色范围和正数的不同颜色范围

column chart color range for negative numbers and different color range for positive

highcharts