javascript - Highcharts - 将 yAxis.max 设置为数据的最大值

标签 javascript charts highcharts bar-chart

我正在使用 Highcharts,我有这个简单的条形图:

my current chart

数据中的最大值为 27,但在比例尺上为 40。如何根据提供的数据将 yAxis.max 设置为最大值?在这个例子中是 27 而不是 40。

老实说,我什至不需要图表上的这些值,但我想强制具有最大值的条形图占据可用高度的 100%。

数据会动态提供,所以我不能手动设置最大值。

这是我当前的代码:

Highcharts.chart('container', {

  chart: {
    type: 'column',
    height: 150,
  },

  yAxis: {
    title: {
      text: null,
    },
    labels: {
      enabled: true,
    },
  },

  xAxis: {
    title: {
      text: null,
    },
  },

  credits: false,

  legend: false,

  title: {
    text: null,
  },

  series: [{
    data: [1, 0, 27, 7]
  }]
});
#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

这是 jsfiddle:http://jsfiddle.net/de3qfb3r/

最佳答案

你说你不关心图表上的值,所以也许添加 endOnTick: false 对你来说就足够了:

yAxis: {
    title: {
        text: null,
    },
    labels: {
        enabled: true,
    },
    endOnTick: false
}

Highcharts 自动计算最大值并将其适合可用高度。但是,当 endOnTick 为真时(这是默认设置),它会添加一个额外的空间以结束一个勾号

关于javascript - Highcharts - 将 yAxis.max 设置为数据的最大值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47103415/

相关文章:

highcharts 树状图热图 level2 颜色变黑

javascript - 使用 HighCharts 的 24 小时时间事件图表

highcharts - 从 highcharts 导出 csv

javascript - 获取原始字符串以用于 Play Framework 2.0 中的 Javascript

javascript - 我将如何制作具有重叠区域的堆积面积图?

java - 请在 Charts4j 上发布一些教程链接

java - 实时Java图形/图表库?

javascript - Three.js - 网格表面的极端阴影

javascript - 如何显示 div 直到 XHR 请求完成

javascript - 使用异步迭代来链接 promise