2017-10-28 125 views
0

我想從兩個數據集中製作一個圖表。這兩個數據都來自HTML中的兩個表格。(amCharts)如何在一個圖表中放置多個(兩個)數據集,並用不同的配色方案區分每個數據集?

隨着我目前的代碼,這兩個表合併成只有一個數據集。我想分開每個表到它自己的數據集,因爲:

  • 我想讓每個數據集都有它自己的顏色。例如。來自表A的數據將全部爲橙色;來自表B的數據將全部爲藍色。
  • 每個數據之間的差異將來自其線條樣式。數據1將具有較粗的線,數據2將具有虛線等。

下面是我打算製作的圖表。

enter image description here

這裏是我當前的代碼和它的結果:http://jsfiddle.net/3j3s1ba7/4/

這些是我從桌子

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

獲取數據在amCharts文檔的線條則說明它是possible to have two data sets, but it seems not at once

任何想法如何做到這一點?

回答

-1

沒有必要擁有「獨立的數據集」。數據集實際上是一個股票圖表功能,而不是一個串行圖表功能。

在您的功能generateGraphsFromData中,您可以簡單地爲圖形添加顏色和樣式設置。您可以從表1中給出不同於圖表的圖形。您只需要找到一種方法來告訴函數哪個圖來自哪個表。

查看dashLength和lineColor設置: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 
// ... 
+0

嗯,我想這就是我卡住的地方:如何判斷函數哪個圖來自哪個表? – deathlock

相關問題