(amCharts) Das Diagramm erhält seine Daten aus einer HTML-Tabelle. Wie aktualisiert man die Legende, wenn eine neue Tabellenzeile dynamisch hinzugefügt wird?

Question

Ich habe eine HTML-Tabelle, die als Datenanbieter für das Diagramm dient. Die Tabelle kann dynamisch mit einem Klick auf die Schaltfläche bearbeitet werden (ich kann eine neue Zeile hinzufügen).

Ich kann das Diagramm jedes Mal aktualisieren, wenn eine neue Zeile hinzugefügt wird. Die Legende bleibt jedoch gleich, sie hat nur drei Anfangsgraphen. Wie kann ich die Legende neben dem Diagramm aktualisieren?

Hier ist meine Geige: https://jsfiddle.net/yvzj8acd/2/

Und hier ist die JS, wo ich neue Zeile in der Tabelle hinzufügen:

  ////////////////////////////////// 
      // 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

Schnell FYI, AmCharts.ready entspricht $(document).ready, so dass Sie leicht die kombinieren zwei.

Wie bei Ihrer Frage müssen Sie Ihre Daten und Diagrammgenerierung Ansatz optimieren, so dass es die dynamisch hinzugefügten Daten verarbeiten kann. Im Moment ist Ihr Setup in den ersten drei Zeilen ziemlich hart codiert und die neuen Daten werden nie hinzugefügt. Sie müssen außerdem das Diagramm aktualisieren und bei Bedarf weitere Diagramme hinzufügen, wenn neue Zeilen hinzugefügt werden.

Das erste, was ich tat, war Aktualisierung Ihre Daten Methode dynamisch generiert alle Zeilen zu ziehen, die Daten enthalten, anstatt die aktuelle fest codierte Methode, die die ersten drei Reihen packt:

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); 
    } 
} 

Als nächstes habe ich ein generateGraphsFromData Methode, die die Diagramminstanz und das chartData-Array übernimmt. Diese Methode vergleicht die im ersten Element des chartData-Arrays gefundenen valueFields mit den valueFields im Array graphs des Diagramms und erstellt neue Graphen, in denen keine Arrays vorhanden sind. Dies funktioniert sowohl für die Erstellung von Diagrammen und Update:

//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); 
    }); 
} 

Von dort habe ich Ihre bereit Methode nur aktualisiert, um diese Funktion aufzurufen, anstatt die graphischen Darstellungen der Einstellung manuell, zusammen mit zwingt die ersten beiden versteckt werden:

// Create graphs 
    generateGraphsFromData(chart, chartData); 

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

Dann modifiziert ich Ihre Click-Ereignis als auch die generateGraphs Methode aufzurufen:

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

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

Updated fiddle. Ich habe auch die AmCharts.ready-Methode in eine separate Standalone-Funktion verschoben und sie in $(document).ready aufgerufen, da beide sowieso identisch sind. Fühlen Sie sich frei, die Logik zu optimieren, wenn Sie andere neue Graphen auf Versteckt oder was auch immer voreinstellen möchten.