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

Question

我用Amcharts制作了一些图形。我想在每个图表下显示我的HTML页面中的数据表（dataProvider）。我到处寻找解决方案，但徒劳无功。以下是amcharts网站上我想要显示的数据表

Answer 1

有关于如何在AmCharts网站here上自动生成表格的示例。这是示例中的代码，您需要在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"]);

仅供参考，如果您使用该代码创建图表，此代码将无法在屏幕截图中的实时编辑器中使用。您必须导出代码并将其插入其中。