如何在 ZingChart 中对齐折线图和条形图之间的垂直参考线？

Question

随着 ColdFusion 9 到 ColdFusion 11 的更新，底层图表引擎从 WebCharts3D 更改为 ZingCharts。虽然我设法为两个库之间的大多数不兼容问题及其在<cfchart> 标签中的实现找到了解决方案，但我正在努力解决在 ColdFusion 9 中没有出现的对齐问题。我什至没有找到尝试纯 javascript 和 HTML 的修复。

在 WebCharts3D 中，参考线和刻度在条形图中的条形内居中。组合折线图和条形图具有指向条形中心并通过折线图标记的指南。这与折线图中的行为完全相同。

在 ZingCharts 中，组合图表或条形图的参考线和刻度线位于条形图的左侧，并且不会穿过线的标记。这是与纯线图表不同的行为。 x 轴标签在两个引擎中完全居中。

您可以在此处查看示例：http://jsfiddle.net/yo3uta96/

问题：

我有非公开页面，其中包含显示雨、风、温度等的统计天气数据，这些数据显示在多个图表中，这些图表彼此下方。其中有些是折线图，有些是条形图，有些是组合图。这是一个动态创建的页面，用户可以在其中选择过去最多 365 天的日期范围。页面上的每个图表都有相同数量的数据点。当要显示的数据点超过80个时，条形图变成面积图，折线图变成没有标记的折线图。

我想要达到的目标：

我希望图表、数据点、指南和刻度线的排列方式与 x 轴标签的排列方式相同。

我尝试了什么：

我设法通过将 offsetStart 和 offsetEnd 添加到纯线图表来排列数据点，这是必要的，因为在组合图表中，折线图的第一个标记放置在相应的第一个条的中心，并且不再位于y 轴与折线图一样。最后一个标记也是如此。

不幸的是，添加偏移量并不能解决我的刻度和参考线对齐问题。我尝试了几乎所有可能的与指南、minorTicks、minorGuides 和偏移量的组合，但无济于事。在理想的世界和一些边缘情况下，每个 x 轴标签都显示在图表上，禁用参考线并将次要刻度设置为 1 可能会起作用。但是这种方法在增加数据点的数量时停止工作。

问题：

如何在条形图和折线图中排列具有相同数量数据点的指南和刻度，就像 ZingCharts 处理似乎在图表之间完美对齐的 x 轴标签一样？

Answer 1

我不相信以下修复将在 ColdFusion 11 中的 CFCharts 中起作用，因为它使用了 ~2015 年末版本的 ZingChart，但在 ZingChart 的 v2.2.2 中添加了一个更改，可以解决这个问题。

通过设置 scale-x 偏移量：0，比例尺将以节点为中心，并表现得像折线图一样。请注意，需要将 plotarea 内的一个名为“maskTolerance”的附加属性设置为 [0,0]。这将确保条形图不会流过 scale-y 边界。

var myConfig = {
type: "mixed",
plotarea: {
	maskTolerance: [0, 0]
},
scaleX: {
	offset: 0,
	guide: {
		visible: true, //set to false by default on some chart types
		lineColor: "red",
		lineWidth: 1
	}
},
series: [{
	type: "bar",
	values: [35, 42, 67, 79, 25, 34, 67, 85]
}, {
	values: [40, 27, 38, 68, 41, 49, 50, 65]
}]
};

zingchart.render({
id: 'myChart',
data: myConfig,
height: 200,
width: "100%"
});

<!DOCTYPE html>
<html>

  <head>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>

  <body>
  	<div id='myChart'></div>  
  </body>

</html>