amCharts 4：外部数据源-来自数据库的JSON输出

Question

仍然尝试使用外部数据源来掌握amCharts 4，这是我之前的问题的后续内容... amCharts 4: External Data Source

我已经使用静态数据创建了水平堆积图，效果很好（下面的代码段）。

但是，当在同一张图表上使用外部数据源时，由于JSON输出不同，因此我没有得到相同的结果。

这是因为外部数据库表的列和行是相反的（来自静态数据），但是不幸的是，不能在源代码处更改。

我浏览了amCharts文档和演示图表，并尝试了各种尝试以达到与静态数据版本相同的图表，但是没有成功。

例如尝试了inversedoppositerotate属性，以及重新配置了图表系列和轴。

也许，parseended事件可用于重新映射外部数据，但老实说，我不知道如何。

我走到了尽头，不确定如何做到这一点，或者正确的（或最佳实践）方法是什么？

每个图表的代码（和数据结构）如下所示。

非常感谢您的帮助。预先感谢。

---

静态数据图表（正确）

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
var chartdata = [{
  "Name": "Question 1 Shows Here",
  "Yes Please": 75,
  "Maybe": 45,
  "No Thanks": 19
}, {
  "Name": "Question 2 Shows Here",
  "Yes Please": 35,
  "Maybe": 43,
  "No Thanks": 26
}, {
  "Name": "Question 3 Shows Here",
  "Yes Please": 57,
  "Maybe": 24,
  "No Thanks": 8
}];

chart.data = chartdata;

// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.numberFormatter.numberFormat = "#";
valueAxis.min = 0;
valueAxis.transitionDuration = 200;
valueAxis.interpolationDuration = 200;
valueAxis.rangeChangeDuration = 200;

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "Yes Please";
series.dataFields.categoryY = "Name";
series.name = "Yes Please";
series.tooltipText = "{name}: [bold]{valueX}[/]";
series.stacked = true;

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueX = "Maybe";
series2.dataFields.categoryY = "Name";
series2.name = "Maybe";
series2.tooltipText = "{name}: [bold]{valueX}[/]";
series2.stacked = true;

var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueX = "Don’t Know";
series3.dataFields.categoryY = "Name";
series3.name = "Don’t Know";
series3.tooltipText = "{name}: [bold]{valueX}[/]";
series3.stacked = true;

var series4 = chart.series.push(new am4charts.ColumnSeries());
series4.dataFields.valueX = "No Thanks";
series4.dataFields.categoryY = "Name";
series4.name = "No Thanks";
series4.tooltipText = "{name}: [bold]{valueX}[/]";
series4.stacked = true;

// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "zoomXY";

// Add legend
chart.legend = new am4charts.Legend();
chart.legend.position = "bottom";
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 90%; height: 300px";></div>

外部数据图表（不正确）

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
var chartdata = [{
  "Name": "Yes Please",
  "Question 1 Shows Here": 75,
  "Question 2 Shows Here": 45,
  "Question 3 Shows Here": 19
}, {
  "Name": "Maybe",
  "Branding and Logos Score": 367,
  "Question 1 Shows Here": 35,
  "Question 2 Shows Here": 43,
  "Question 3 Shows Here": 26
}, {
  "Name": "Don’t Know",
  "Question 1 Shows Here": 42,
  "Question 2 Shows Here": 31,
  "Question 3 Shows Here": 12
}, {
  "Name": "No Thanks",
  "Question 1 Shows Here": 17,
  "Question 2 Shows Here": 27,
  "Question 3 Shows Here": 15
}];

chart.data = chartdata;

// Create category axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;

// Create value axes
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.numberFormatter.numberFormat = "#";
valueAxis.min = 0;
valueAxis.transitionDuration = 200;
valueAxis.interpolationDuration = 200;
valueAxis.rangeChangeDuration = 200;

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "Question 1 Shows Here";
series.dataFields.categoryY = "Name";
series.name = "Question 1 Shows Here";
series.tooltipText = "{name}: [bold]{valueX}[/]";
series.stacked = true;

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueX = "Question 2 Shows Here";
series2.dataFields.categoryY = "Name";
series2.name = "Question 2 Shows Here";
series2.tooltipText = "{name}: [bold]{valueX}[/]";
series2.stacked = true;

var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueX = "Question 3 Shows Here";
series3.dataFields.categoryY = "Name";
series3.name = "Question 3 Shows Here";
series3.tooltipText = "{name}: [bold]{valueX}[/]";
series3.stacked = true;

// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "zoomXY";

chart.legend = new am4charts.Legend();
chart.legend.position = "bottom";
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 90%; height: 300px";></div>

仍然尝试使用外部数据源来掌握amCharts 4，这是我之前的问题的后续内容... amCharts 4：外部数据源我已经创建了水平堆积图...

Answer 1

parseended是在这种情况下的解决方法。您需要为您的问题设置一个查找表，并将它们映射到包含映射到每个响应的值的对象，例如：