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

Question

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

找不到修复方法

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

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

你可以在这里看到一个例子：http://jsfiddle.net/yo3uta96/

问题：

我有 none-public 页的统计天气数据显示了雨、风、温度等，这些数据在一张下面的许多图表中表示。有的是折线图，有的是柱状图，有的是组合图。这是一个动态创建的页面，用户可以在其中 select 日期范围最多为过去 365 天。页面上的每个图表都有相同数量的数据点。当要显示的数据点超过80个时，条形图变成面积图，折线图变成没有标记的折线图。

我想达到的效果：

我想让图表、数据点、参考线和刻度按与 x 轴标签相同的方式排列。

我试过的：

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

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

问题：

如何使用相同数量的数据点排列条形图和折线图中的参考线和刻度线，就像 ZingCharts 处理 x 轴标签一样，这些标签似乎在图表中完美对齐？

Answer 1

我认为以下修复不会在 ColdFusion 11 中的 CFCharts 中起作用，因为它使用的是 ~2015 年末版本的 ZingChart，但在 ZingChart 的 v2.2.2 中添加了一个更改，为这个问题提供了补救措施.

通过设置 scale-x offset:0，比例尺将以节点为中心，并且表现得像折线图一样。请注意，需要将名为 "maskTolerance" 的 plotarea 内的附加属性设置为 [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>

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

How to align vertical guides between line and bar charts in ZingChart?

coldfusion

charts

cfchart

zingchart

coldfusion-11