随着ColdFusion 9到ColdFusion11的更新,底层图表引擎从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中起作用,因为它使用了ZingChart的2015年后期版本,但ZigChart的v2.2.2中添加了一个更改,可以解决这个问题。
通过设置标度偏移:0,标度将以节点为中心,并将表现为折线图。请注意,绘图区域内名为"maskTolerance"的附加属性需要设置为[0,0]。这将确保钢筋不会流血超过标度边界。
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>