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

Question

我想在没有数据时使用 amcharts 版本 4 显示 empty/dummy 条形图，如下所示 link 使用 amcharts 版本 3。

我试过类似下面的方法，但出现错误。

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？

Answer 1

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

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

其次，XYChart.datais 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

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

How to draw bar chart with empty data using Amchart 4?

amcharts

amcharts4