由网友(死之梦i)分享简介:上下文我正在尝试使用amCharts 5复制amCharts 4Auto-adjusting chart height based on a number of data items。带控制台日志的代码笔:amCharts 4:https://codepen.io/jackfoo/pen/XWeoNdWamCha...![从已知探索未知的设计之道](https://p.xsw88.cn/allimgs/daicuo/20230903/3920.png)
上下文
我正在尝试使用amCharts 5复制amCharts 4Auto-adjusting chart height based on a number of data items。
带控制台日志的代码笔:
amCharts 4:https://codepen.io/jackfoo/pen/XWeoNdW amCharts 5:https://codepen.io/jackfoo/pen/MWEZKbX 第一次执行CategoryAxis
的datavalidated
事件的回调时,CategoryAxis.height()
返回一个似乎错误的值。我不知道轴是否实际上是在第一个datavalidated
事件之前渲染的。如果不是,则我猜调用CategoryAxis.height()
没有意义。
![从已知探索未知的设计之道](https://p.xsw88.cn/allimgs/daicuo/20230903/3920.png)
有关信息,第一次执行回调时,属性inited
为FALSE。
问题
第一次执行CategoryAxis
的datavalidated
事件的回调时,CategoryAxis.height()
应该返回什么?
推荐答案
AmCharts现已更新其版本5的教程。
amCharts 5: Auto-adjusting chart height based on a number of data items
现在使用
设置高度chart.root.dom.style.height = chartHeight + "px";
需要注意的几点
AmCharts 5使用根元素和方法-您创建一个根元素, 然后向其中添加实际图表或系列对象。...
AmCharts 4没有 具有根元素,因此图表实例是 树。...
AmCharts 5使用Canvas API作为其呈现方法,而 AmCharts 4使用了SVG。~AmCharts 4 and 5
完整代码在their codepen...现在,带数据验证的事件在系列上。var cellSize = 30;
series.events.on("datavalidated", function(ev) {
var series = ev.target;
var chart = series.chart;
var xAxis = chart.xAxes.getIndex(0);
// Calculate how we need to adjust chart height
var chartHeight = series.data.length * cellSize + xAxis.height() +
chart.get("paddingTop", 0) + chart.get("paddingBottom", 0);
// Set it on chart's container
chart.root.dom.style.height = chartHeight + "px";
});
相关推荐
最新文章