Highcharts - 同一x轴尺度的多个图表

Question

5

我希望制作多个图，使x轴对齐，以便比较两组数据。我希望它看起来像这样。

在我的情况下，有一些额外的要求，其中一些情节是线条，一些情节是条形图。因此，即使数据范围相同，缺省刻度也不对齐。

我发现了一些关于“堆叠”图表的好建议。虽然有点复杂，但是这是一个值得尝试的有希望的方法。

但是我还有其他的用例可能会挑战简单堆叠的极限。例如，有时我想要做散点图矩阵，当x轴和y轴都需要对齐时就像这样。

与其将多个图表放在一个Highchart中，这可能需要许多独立的图表，但可以更好地控制轴的布局。

- Wai Yip Tung

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paweł Fus · Accepted Answer

1

如果你想使用一个图表，你可以使用linkedTo选项来连接轴。

如果你想要更简单的图表，你可以使用事件afterSetExtremes来连接轴，在这里你可以为另一个图表调用setExtremes()。

- Paweł Fus

我使用setExtremes将两个图表设置为相同的范围，但网格仍然不对齐。http://jsfiddle.net/tungwaiyip/WEcEt/21/ - Wai Yip Tung

这是基于第二个链接中的堆叠示例。它对齐正确。不过我需要在轴标签上工作。 http://jsfiddle.net/tungwaiyip/F3pts/6/ - Wai Yip Tung

抱歉，我错过了您的评论。对于列，您必须设置pointRange，对于标签，我建议设置固定边距。请参见：http://jsfiddle.net/WEcEt/22/。 - Paweł Fus

谢谢。这个例子是有效的。但是当我尝试将它应用到我的项目上时，它再次无法对齐。我的x轴是线性的而不是日期时间。我无法将它们对齐。http://jsfiddle.net/tungwaiyip/EdRuj/3/ - Wai Yip Tung

我已经通过一些试错使其工作。将柱状图与折线图对齐的关键是将柱状图的pointRange设置为0。为了补偿宽度为0的柱子，将xAxis的min/maxPadding设置为0.03。很抱歉我还没有制作可视化演示。 - Wai Yip Tung