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

随着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轴标签,这些标签看起来完全对齐图表?

最佳答案
我不认为以下修复在ColdFusion 11中的CFCharts中有效,因为它使用了2015年末的ZingChart版本,但ZingChart的v2.2.2中添加了一个更改,为此问题提供了补救措施.

通过设置scale-x offset:0,缩放将以节点为中心,并将表现为折线图.请注意,plotarea中名为“maskTolerance”的附加属性需要设置为[0,0].这将确保条纹不会超过尺度-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中对齐折线图和条形图之间的垂直参考线? - 代码日志