javascript - Highcharts 中同一方向上的负号和正号

喂，
使用高图可以显示相同方向上的负数和正数吗？
像这样：
expected result

最佳答案

是的，有可能，但是您需要捏造它。使标签显示为负，但使用图形的绝对值（始终为正）。

在您发表评论并链接到代码之后，我能够找到我认为适合您的解决方案。

//tooltip function
function format_tt(inp) {
  index = this.point.index;


  var s = '<b>' + this.x + '</b>';
  var point = this.point;

  s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>: ' + point.series.name + ': ' + tdata[index];

  return s;
}

//Data
tdata = [20, -20];
//Rework the data to use only the positive values, but only for our graph. Wherever we need the true values, we reference tdata.
data = tdata.map(function(_) {
  return Math.abs(_);
});
$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    legend: {
      align: "center",
      labelFormatter: function() {
        var count = 0;

        for (var i = 0; i < this.yData.length; i++) {
          count += this.yData[i]; //change this to tdata[i] to get the true value;
        }

        return this.name + ' (' + count + ')';
      },
      y: 3
    },
    title: {
      text: 'Column chart with negative values'
    },
    xAxis: {
      categories: ['Receitas', 'Despesas']
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Receitas e despesas',
      data: data //Our data, AFTER the conversion
    }],
    tooltip: {
      formatter: format_tt //our tooltip function.
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

jsFiddle：http://jsfiddle.net/zb2edyLe/3/

现在，tdata是您放置数据的位置。不是原来的地方，请查看代码中的注释，以解释我的所作所为。

关于javascript - Highcharts 中同一方向上的负号和正号，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36415133/