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

【问题标题】：How to draw bar chart with empty data using Amchart 4?如何使用 Amchart 4 绘制带有空数据的条形图？
【发布时间】：2020-10-18 19:09:07
【问题描述】：

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

Example with amcharts version 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 类似问题上讨论过的想法？

【问题讨论】：

标签： amcharts amcharts4

【解决方案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

【讨论】：