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 offset：0，比例将以节点为中心，并将表现为折线图。请注意，plotarea内的另一个属性称为＆＃34; maskTolerance＆＃34;将需要设置为[0,0]。这将确保条纹不会超过尺度-y边界。

＆＃13;

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%"
});

＆＃13;

<!DOCTYPE html>
<html>

  <head>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>

  <body>
  	<div id='myChart'></div>  
  </body>

</html>

＆＃13;

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

1 个答案: