javascript - 如何在highcharts中同步多个图表的高度和y轴基线

标签 javascript css highcharts

我在一个页面上有多个图表,它们应该具有统一的高度和 y 轴基线,以便用户可以比较每个图表 apple-2-apple。

我将 x 轴标签旋转了 90 度,这样看起来会更好看并且不会相互重叠,但问题是标签的长度因图表而异,这使得 highcharts 自动调整高度和图表的 y 轴基线。

enter image description here

如何使页面上所有图表的图表高度和 y 轴基线固定?

最佳答案

您可以使用marginBottom 设置图表的下边距:

$('#container').highcharts({
    chart: {
        marginBottom: 150
    }
});   

这将确保图表底部始终保持相同大小。

在这里您可以看到一个并排显示 2 个图表的示例,一个名称较长,另一个名称较短。

http://jsfiddle.net/ktxn7ewx/

这是 HighCharts API:http://api.highcharts.com/highcharts#chart.marginBottom

关于javascript - 如何在highcharts中同步多个图表的高度和y轴基线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29510979/

相关文章:

javascript - 获取 jQuery 对象数组中的项目以显示在 div onclick 中

javascript - puppeteer : console. 登录评估触发器错误 "Unhandled promise rejection"

html - 如何修复页脚?

html - CSS 边距未按预期工作

javascript - 使 Div 区域适应背景图像大小

javascript - Highcharts:将多轴图表中的柱形图转换为堆积柱形图

javascript - 防止在 js 中为 Web 表单下拉列表回发

javascript - Node 不提供静态目录

css - 在 Highcharts 柱形图和饼图中悬停时边框部分隐藏

javascript - 从与图表无关的事件中获取当前选择的rangeSelector