Question

我有一个带有堆叠列的图表。正面和负面的价值观。示例：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
        text: 'show total sum always on top (also negatives)',
        },
        xAxis: {
            categories: ['positives', 'mixed', 'negatives']
        },
        yAxis: {
            stackLabels: {
                enabled: true,
                align: 'center'
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            plotLines: [{
                        color: '#333',
                        width: 1,
                        dashStyle: 'dash',
                        value: 0
                    }],
          stackLabels: {
            enabled: true,
            align: 'center',
            style: {
              fontWeight: 'normal',
              color: 'red',
              fontSize: '10px'
            },
            
          }
        },
        plotOptions: {
        		series: {
              pointWidth: 40
        		},
            column: {
                stacking: 'normal',
                pointPadding: 0,
                groupPadding: 0,
                dataLabels: {
                    enabled: false,
                    color: '#FFFFFF'
                }
            }
        },
        series: [{
            data: [10, -10, -5]
        }, 
        {
            data: [15, -5, -5]
        },
        {
            data: [10, 20, -5]
        }]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" style="height: 400px"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>

http://jsfiddle.net/tmrLwj17/1/

我需要实现的是，我需要始终显示负数和正数之和。当只有正值时，它工作正常。我正在研究类似的小提琴：http://jsfiddle.net/sph1LjtL/5/ 负数之和总是低于。我需要他们在顶部。谢谢！

Answer 1

请参阅此实时演示：http://jsfiddle.net/kkulig/0upL93mb/

我为chart.events.render中的标签计算自定义值，因为我能够轻松访问和操作y轴堆栈（redrawEnabled标志可以防止无限递归循环 - Chart.redraw()调用{ {1}}事件）：

请参阅此实时演示：http://jsfiddle.net/kkulig/5t9z9sto/

我为render中的标签计算自定义值，因为我能够轻松访问和操作y轴堆栈（chart.events.render标志可以防止无限递归循环 - redrawEnabled调用{ {1}}事件）：

Chart.redraw()

然后我在render

中使用它们

chart: {
  type: 'column',
  events: {
    render: function() {

      if (redrawEnabled) {
        redrawEnabled = false;

        var stacks = this.yAxis[0].stacks,
          yAxis = this.yAxis[0];

        // show some additional space for the negative column labels
        if (yAxis.max <= 0) {
          yAxis.setExtremes(null, 5);
        }

        for (var prop in stacks['-column']) {
          var negColumn = stacks['-column'][prop],
            posColumn; // corresponding positive column

          if (stacks.column) {
            posColumn = stacks.column[prop]
          }

          if (posColumn) {
            // add custom properties that will be used in stackLabels.formatter
            posColumn.totalToDisplay = posColumn.total + negColumn.total;
            negColumn.hideStackLabel = true;
          } else { // change the position of the negative stack label
            negColumn.label.alignOptions.verticalAlign = 'top';
            negColumn.label.alignOptions.y = -8;
            negColumn.hideStackLabel = false;
          }
        }

        // stackLabels.formatter launches before events.load so the chart needs to be redrawn to launch it again
        this.redraw(true);
        redrawEnabled = true;
      }
    }
  }
}

然后我在stackLabels.foramtter:

中使用它们

    formatter: function() {
      return this.hideStackLabel ? '' : this.totalToDisplay || this.total;
    }

Highcharts显示堆积列总和总是在顶部（甚至是负数）

1 个答案: