（amCharts）图表从HTML表格获取其数据。如果动态添加新表格行，如何更新图例？

Question

我有一个HTML表格，作为图表的数据提供者。该表可以通过点击按钮来动态编辑（我可以添加一个新行）。

我可以在每次添加新行时更新图表。然而，图例仍然相同，它只有三个初始图。我怎样才能更新图表旁边的图例？

这里是我的小提琴：https://jsfiddle.net/yvzj8acd/2/

这里是JS，我添加新行到表：

  ////////////////////////////////// 
      // This is where I update the chart 
      ////////////////////////////////// 

      $(document).ready(function() { 

      var newtr = "<tr class='row1a'><th>Row 4</th><td>10000</td><td>20000</td><td>5000</td><td>15000</td><td>7500</td><td>10000</td></tr>" 
      var newtr2 = "<tr class='row1a'><th>Row 5</th><td>15000</td><td>30000</td><td>2000</td><td>10000</td><td>15500</td><td>7000</td></tr>" 
      var newtr3 = "<tr class='row1a'><th>Row 6</th><td>1000</td><td>25000</td><td>15000</td><td>7000</td><td>10000</td><td>8000</td></tr>" 

       $(".ganti").click(function(e) { 
       $('#dataTable').append(newtr, newtr2, newtr3); 

       generateChartData(); 
       chart.dataProvider = chartData; 
       chart.validateData(); 
       chart.animateAgain(); 

       e.preventDefault(); 
       }); 
      }); 

Answer 1

快速仅供参考，AmCharts.ready相当于$(document).ready，所以你可以很容易地结合二。

至于你的问题，你需要调整你的数据和图表生成方法，以便它可以处理动态添加的数据。现在，您的设置几乎是硬编码到前三行，新数据永远不会被添加。您还需要更新图表，并在添加新行时根据需要添加其他图表。

我做的第一件事是更新您的生成数据的方法，以动态地拉包含数据的所有行，而不是抓住前三行目前的硬编码的方法：

function generateChartData() { 

    // initialize empty array 
    chartData = []; 

    // get the table 
    var table = document.getElementById('dataTable'); 

    var years = table.rows[0].getElementsByTagName('th'); 

    //get the rows with graph values. Since data rows always 
    //have a class that begin with "row", use that as the query selector 
    var rows = document.querySelectorAll("tr[class^='row']"); 

    var row; 

    // iterate through the <td> elements of the first row 
    // and construct chart data out of other rows as well 
    for (var x = 0; x < years.length; x++) { 
    //set up the initial object containing the year 
    var dataElem = { 
     "year": years[x].textContent 
    }; 
    //iterate through the other rows based on the current year column (x + 1) and add that value to the 
    //object 
    for (row = 0; row < rows.length; row++) { 
     dataElem[rows[row].cells[0].textContent] = rows[row].cells[x + 1].textContent 
    } 
    //append final object to chart data array 
    chartData.push(dataElem); 
    } 
} 

接下来，我创建了一个generateGraphsFromData使用图表实例和chartData数组的方法。此方法将chartDataData数组的第一个元素中的valueFields与图表的graphs数组中的valueFields进行比较，并创建数组中没有任何数据的新图。这适用于创建图表既和更新：

//update the chart's graphs array based on the the currently known valueFields 
function generateGraphsFromData(chart, chartData) { 
    //get the chart graph value fields 
    var graphValueFields = chart.graphs.map(function(graph) { 
    return graph.valueField; 
    }); 
    //create an array of new graph value fields by filtering out the categoryField 
    //and the currently known valueFields. 
    var newGraphValueFields = Object.keys(chartData[0]).filter(function(key) { 
    return key != chart.categoryField; 
    }).filter(function(valueField) { 
    return graphValueFields.indexOf(valueField) === -1; 
    }); 

    //for each new value field left over, create a graph object and add to the chart. 
    newGraphValueFields.forEach(function(valueField) { 
    var graph = new AmCharts.AmGraph(); 
    graph.title = valueField; 
    graph.valueField = valueField; 
    graph.balloonText = "Rp[[value]]"; 
    graph.lineAlpha = 1; 
    graph.bullet = "round"; 
    graph.stackable = false; // disable stacking 
    chart.addGraph(graph); 
    }); 
} 

从那里我刚刚更新了你的准备方法调用，而不是手动设定图，与迫使前两个被隐藏沿此功能：

// Create graphs 
    generateGraphsFromData(chart, chartData); 

    //default the other two graphs to hidden 
    chart.graphs[1].hidden = true; 
    chart.graphs[2].hidden = true; 

然后我修改点击事件来调用generateGraphs方法，以及：

$(".ganti").click(function(e) { 
    $('#dataTable').append(newtr, newtr2, newtr3); 

    generateChartData(); 
    generateGraphsFromData(chart, chartData); 
    // ... 

Updated fiddle。我也将AmCharts.ready方法转移到一个单独的独立函数中，并将其命名为$(document).ready，因为无论如何它们都是相同的。随意调整逻辑，如果你想默认其他新图形隐藏或任何。