如何在每张图下显示Amcharts图形中使用的DataProvider的数据？

Question

我用 Amcharts 做了一些图表。我想在我的 HTML 页面中的每个图表下显示它的 table 数据（dataProvider）。我到处寻找解决方案，但徒劳无功。这里是我要展示的amcharts网站在线数据table

Answer 1

在 AmCharts 的网站 here 上有一个关于如何自动生成 table 的示例。这是示例中的代码，您需要在调用 makeChart 之前添加此代码：

/**
 * A plugin to automatically creata a data table for the chart
 * The plugin will check if the chart config has the following setting set: "dataTableId"
 */
AmCharts.addInitHandler(function(chart) {

  // check if export to table is enabled
  if (chart.dataTableId === undefined)
    return;

  // get chart data
  var data = chart.dataProvider;

  // create a table
  var holder = document.getElementById(chart.dataTableId);
  var table = document.createElement("table");
  holder.appendChild(table);
  var tr, td;

  // add first row
  for (var x = 0; x < chart.dataProvider.length; x++) {
    // first row
    if (x == 0) {
      tr = document.createElement("tr");
      table.appendChild(tr);
      td = document.createElement("th");
      td.innerHTML = chart.categoryAxis.title;
      tr.appendChild(td);
      for (var i = 0; i < chart.graphs.length; i++) {
        td = document.createElement('th');
        td.innerHTML = chart.graphs[i].title;
        tr.appendChild(td);
      }
    }

    // add rows
    tr = document.createElement("tr");
    table.appendChild(tr);
    td = document.createElement("td");
    td.className = "row-title";
    td.innerHTML = chart.dataProvider[x][chart.categoryField];
    tr.appendChild(td);
    for (var i = 0; i < chart.graphs.length; i++) {
      td = document.createElement('td');
      td.innerHTML = chart.dataProvider[x][chart.graphs[i].valueField];
      tr.appendChild(td);
    }
  }

}, ["serial"]);

仅供参考，此代码在您的屏幕截图中的实时编辑器中不起作用，以防您使用它来创建图表。您必须导出代码并将其插入。

如何在每张图下显示Amcharts图形中使用的DataProvider的数据？

How to display the data of DataProvider used in Amcharts graphics under each graph?

html

javascript

amcharts