Question

如果y数据点为100，并且ceiling设置为101，则柱形图顶部y轴标签为150，这发生在当前版本v2.1.4中。之前我曾经拥有v2.0.4并且显示正常。现在该图表看起来已压缩。有可能解决它吗？我的所有图表看起来都像是矮人。

Answer 1

图表最大高度问题：

将天花板更改为100，因为（根据您的评论），该值永远不会超过100。

yAxis: {
    floor: 0,
    ceiling: 100,
    title: {
        text: 'Percentage'
    }, // etc...

图表问题上方的额外间距：

选项1 （demo）：如果您需要图表标题上方的空格，只需在现有容器的CSS中添加margin-top值：

<div id="container" style="height: 300px; margin-top: 50px;"></div>

选项2 （demo）：如果您需要图表标题和图表顶部之间的空格，我发现实现这一目标的最佳方式是将图表的标题设置为空白（＆＃39;＆＃39;）并在图表上方添加自定义标题，并应用下边距。通常情况下，我建议覆盖图表的CSS，但在这种情况下，这似乎不起作用。

chart: {
    type: 'column'
},
title: '', // This clears the default title
xAxis: // etc...

为HTML添加自定义标题：

<div id="title" style="font-size: 18px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif; text-align: center;">Y axis floor is 0</div>
<div id="container" style="height: 300px; margin-top: 50px;"></div>

PS - 理想情况下，您的所有样式都将位于单独的.css文件中，或者文档中至少包含<style>块。我已经使用内联样式为您提供了一些快速解决方案，具体取决于您已经为文档设置样式。

Highstock柱形图y轴上限问题

1 个答案: