（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，因爲無論如何它們都是相同的。隨意調整邏輯，如果你想默認其他新圖形隱藏或任何。