Question

我在高图area中使用下面的简单version 5.0.6图表。

如果任何一个值不为零，则零值将向下迁移到轴：

当所有值均为零时，如何确保零在x轴上都没有间隙？

Answer 1

如果设置了yAxis min和max值，则间隙将不存在。我假设您具有动态数据，因此将这些值设置为静态将很困难。因此，您可以这样做：

添加一个加载事件，该事件在加载后遍历图中的所有点，并检查它们是否全部为零。如果它们全为零，则使用更新函数显式设置yAxis min和max。您需要设置类似以下图表选项的内容：

chart: {
  events: {
    load: function() {
      let allZero = true
      let seriesData = this.series[0].data
      for (let i = 0; i < seriesData.length; i++) {
        if (seriesData[i].y != 0) {
          allZero = false
        }
      }
      if (allZero) {
        this.update({
          yAxis: {min: 0, max: 1}
        }, true)
      }
    }
  }
},

var chart = Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
        let allZero = true
        let seriesData = this.series[0].data
        for (let i = 0; i < seriesData.length; i++) {
          if (seriesData[i].y != 0) {
            allZero = false
          }
        }
        if (allZero) {
          this.update({
            yAxis: {
              min: 0,
              max: 1
            }
          }, true)
        }
      }
    }
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  plotOptions: {
    series: {
      allowPointSelect: true
    }
  },
  series: [{
    data: [0, 0, 0, 0, 0, 0]
  }]
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

工作中的JSFiddle示例： http://jsfiddle.net/ewolden/4Lq2mb3w/1/

载入事件中的API： https://api.highcharts.com/highcharts/chart.events.load

chart.update（）上的API： https://api.highcharts.com/class-reference/Highcharts.Chart#update

Answer 2

当仅存在一个y值时，这是计算比例尺的最小值和最大值的一般问题。图表无法计算极端值，因此在中间绘制线。很久以前，有人将与xAxis的对齐方式报告为bug，现在已修复。.

无论如何，通用解决方案是使用简单的插件来更改此行为并与xAxis对齐：http://jsfiddle.net/BlackLabel/td83ms0q/

Highcharts.wrap(Highcharts.Axis.prototype, 'setTickPositions', function(proceed, secondPass) {
  proceed.call(this, secondPass);
  if (this.tickPositions.length === 1 && this.options.alignToAxis) {
    this.min = 0;
    this.max *= 2;
  }
});

当所有值均为零时，删除高图区域图下方的间隙

2 个答案: