如何使用Amchart 4绘制带有空数据的条形图？

问题描述

当使用amcharts版本4时，如下面的链接所示，我想在没有数据的情况下显示空白/虚拟条形图。

我尝试了以下类似操作，但出现错误。

reChartData = am4core.create("exeChart",am4charts.XYChart);
var categoryAxis = reChartData.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.datafields.category = "";
var  valueAxis = reChartData.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 100;
var dataPoint = {
  dummyValue: 0
};
reChartData.data = dataPoint;
var series = reChartData.series.push(new am4charts.ColumnSeries());
series.datafields.categoryX = "";

错误：

Error: Data fields for series "id-98" are not properly defined.
at e.validateData (charts.js:20)
at t.update (core.js:19)
at core.js:19

@GMStevents和@TonyMontana，请问您已经就类似问题here进行了讨论吗？

解决方法

首先，您得到的错误是因为您没有定义系列数据字段。您需要为您的系列指定dataFields的名称。例如：

series.dataFields.categoryX = "category";
series.dataFields.valueY = "value";

第二，XYChart.data is an array。您无法分配对象。

然后在没有数据时在图表上显示消息，在图表上创建一个容器并添加标签，如下所示：

if (!reChartData.data || reChartData.data.length === 0){
  const noDataMessagecontainer = reChartData.chartContainer.createChild(am4core.Container);
  noDataMessagecontainer.align = 'center';
  noDataMessagecontainer.isMeasured = false;
  noDataMessagecontainer.x = am4core.percent(50);
  noDataMessagecontainer.horizontalCenter = 'middle';
  noDataMessagecontainer.y = am4core.percent(50);
  noDataMessagecontainer.verticalCenter = 'middle';
  noDataMessagecontainer.layout = 'vertical';

  const messageLabel = noDataMessagecontainer.createChild(am4core.Label);
  messageLabel.text = 'There is no data to show on this chart.';
  messageLabel.textAlign = 'middle';
  messageLabel.maxWidth = 300;
  messageLabel.wrap = true;
}

See sample here

amcharts amcharts4