5

随着 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 轴标签的相同方式在条形图和折线图中排列具有相同数量数据点的指南和刻度？

4

1 回答 1

7

我不相信以下修复将在 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>

于 2016-04-16T17:29:50.717 回答