javascript - Highchart 中的正负方向相同

Question

你好，

是否可以使用 highchart 以同一方向显示负数和正数序列？

像这样:

expected result

Answer 1

是的，这是可能的，但你需要捏造它。使标签显示负数，但使用数字的绝对值(始终为正数)。

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

//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 现在是您放置数据的位置。不是原来的地方，请查看代码中的注释，因为它解释了我所做的事情。