(amCharts) Wie kann man mehrere (zwei) Datensätze in einem Diagramm ablegen und alle Datensätze mit unterschiedlichen Farbschemata unterscheiden?

Question

Ich versuche, ein Diagramm aus zwei Datensätzen zu erstellen. Beide Daten stammen aus zwei Tabellen im HTML.

Mit dem Code, den ich derzeit habe, sind die beiden Tabellen nur in einen Datensatz kombiniert. Ich möchte jede Tabelle zu einem eigenen Datensatz trennen, denn:

• Ich möchte jeden Datensatz hat seine eigene Farbe. Z.B. Daten von Tabelle A werden alle orange gefärbt sein; Daten aus Tabelle B werden alle blau gefärbt.
• Der Unterschied zwischen den einzelnen Daten ergibt sich aus dem Linienstil. Daten 1 haben eine dickere Linie, Daten 2 haben eine gestrichelte Linie usw.

Hier ist das Diagramm, das ich machen möchte.

Hier ist meine aktuellen Code und sein Ergebnis: http://jsfiddle.net/3j3s1ba7/4/

Diese sind die Linien, wo ich die Daten aus der Tabelle

 function generateChartData() { 

      // initialize empty array 
      chartData = []; 

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

      // get table rows 
      var rows = table.getElementsByTagName('tr'); 

      // iterate through the <td> elements of the first row 
      // and construct chart data out of other rows as well 
      var years = rows[ 0 ].getElementsByTagName('th'); 
      var row1_desc = rows[ 1 ].getElementsByTagName('td'); 
      var row2_desc = rows[ 2 ].getElementsByTagName('td'); 
      var row3_desc = rows[ 3 ].getElementsByTagName('td'); 

      var row 
      for (var x = 0; x < years.length; x++) { 
      chartData.push({ 
       "year": years[ x ].innerHTML, 
       "row1_desc": row1_desc[ x ].innerHTML, 
       "row2_desc": row2_desc[ x ].innerHTML, 
       "row3_desc": row3_desc[ x ].innerHTML 
      }); 
      } 
     } 

In amCharts docs bekommen es erklärt wird, ist es possible to have two data sets, but it seems not at once.

Irgendeine Idee, wie man es macht?

Answer 1

Es ist nicht notwendig, "separate dataSets" zu haben. DataSets sind wirklich eine Stock Chart Funktion, keine Serial Chart Funktion.

In Ihrer Funktion generateGraphsFromData können Sie Ihren Grafiken einfach Farb- und Stileinstellungen hinzufügen. Sie könnten den Graphen aus Tabelle 1 einen anderen Stil geben als Graphen aus Tabelle 2. Sie müssen nur einen Weg finden, um der Funktion mitzuteilen, welcher Graph aus welcher Tabelle stammt.

Schauen Sie sich dieLength- und lineColor-Einstellungen an: https://docs.amcharts.com/3/javascriptcharts/AmGraph.

var graph_color = "orange"; // or blue 
var graph_dashLength = 2; 

var graph = new AmCharts.AmGraph(); 
graph.title = valueField; 
graph.lineColor = graph_color, 
graph.dashLength = graph_dashLength 
// ...