Google Chart API 和多个图表数据点的垂直对齐答案

【问题标题】：Google Chart API and vertical alignment of multiple charts' data pointsGoogle Chart API 和多个图表数据点的垂直对齐
【发布时间】：2014-04-23 09:49:22
【问题描述】：

这是使用谷歌图表 api 设置的：

<div id="dashboard">
  <div id="columnchart1" />
  <div id="linechart" />
  <div id="columnchart2" />
  <div id="chartrangefiltercontrol" />
</div>

所有图表和控件都使用相同的数据表，并通过包装类进行管理，横轴是时间（日期）。数据需要垂直排列，因此 2014 年 1 月 1 日折线图上的数据点必须与 2014 年 1 月 1 日柱状图 1 和柱状图 2 上的数据点对齐。但它们没有。

尝试通过将每个图表的 3 个图表 options.hAxis.viewWindow.(min, max) 值设置为相同来解决问题，但这带来了不同的问题：rangefiltercontrol 不会缩放图表（它仍然会左右平移）。

如何使图表比例相同并随控件缩放？

提前谢谢你。

【问题讨论】：

我已经进行了修复，但我不确定它的设计是否干净。我所做的是设置 viewWindow 的最小值和最大值，并向控件添加了一个“就绪”事件侦听器，这反过来又向控件添加了“状态更改”侦听器，然后将 viewWindow 设置为 control.getState() 值。有没有cmets？

标签： javascript google-visualization

【解决方案1】：

轴值不会精确对齐，因为 ColumnCharts 在轴端点的左侧和右侧添加填充以考虑列组的宽度。此填充的大小各不相同，并且在很大程度上是不可预测的，因此您必须等待图表呈现，获取轴范围，为每个图表设置适当的选项，然后重绘。我建议将您的仪表板减少为从 ChartRangeFilter 控制单个图表，并在该图表上使用“就绪”事件处理程序来设置其他图表的数据并重绘它们。这大大减少了原本需要的图表间事件协调（这并没有完全消除协调，但确实减少了您必须做的事情）。

如果您愿意用您的图表代码和示例数据更新您的问题，我将详细说明如何实现这一目标。

【讨论】：