Question

我想以其他方式显示堆叠的条形图。我在A，B和A-B系列中有3个值，我希望在堆叠时使用：正常。我希望将A，B和A-B正面堆叠在一起。 A-B的值可以是正值或负值，但应显示在正轴上，并且应与A＆B叠加。

如果A-B值为正，则应为绿色，否则应为红色。

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script>

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Column chart with negative values'
    },
    xAxis: {
        categories: ['A1', 'A2', 'A3', 'A4', 'A5']
    },
    credits: {
        enabled: false
    },
     plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'A',
        data: [5, 4, 4, 2, 2]
    }, {
        name: 'B',
        data: [2, 7, 3, 7, 1]
    }, {
        name: 'A-B',
        data: [3, -3, 1, -5, 1]
    }]
});

</script>

Answer 1

您可以预处理数据以将y转换为绝对值并设置单独的颜色：

var abData = [3, -3, 1, -5, 1];

abData.forEach(function(el, i) {
  abData[i] = {
    y: Math.abs(el),
    color: el > 0 ? 'green' : 'red'
  }
});

实时演示： http://jsfiddle.net/BlackLabel/h4gs2wLd/

API参考： https://api.highcharts.com/highcharts/series.column.data.color

Answer 2

您可以在解决方案中使用“区域”参数，我不确定，但是如果您需要极端情况，可以在某个地方使用格式化程序解决方案

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script>

Highcharts.chart('container', {
chart: {
    type: 'bar'
},
title: {
    text: 'Column chart with negative values'
},
xAxis: {
    categories: ['A1', 'A2', 'A3', 'A4', 'A5']
},
credits: {
    enabled: false
},
 plotOptions: {
    series: {
        stacking: 'normal'
    }
},
series: [{
    name: 'A',
    data: [5, 4, 4, 2, 2]
}, {
    name: 'B',
    data: [2, 7, 3, 7, 1]
}, {
    name: 'A-B',
    data: [3, -3, 1, -5, 1],
    zones: [
          {
            value: 0,
            color: '#f50303'
          }, 
          {
            color: '#1eb300'
          }
        ]
}]
});

如何更改y轴的两侧？

2 个答案: