AmCharts 5：第一个带数据验证的事件之后的CategoryAxis.Height() [英] amCharts 5: CategoryAxis.height() after first datavalidated event

问题描述

上下文

我正在尝试使用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()没有意义。

有关信息，第一次执行回调时，属性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";
});

这篇关于AmCharts 5：第一个带数据验证的事件之后的CategoryAxis.Height()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！