2017-10-28 18 views
0

私は2つのデータセットからチャートを作成しようとしています。両方のデータは、HTML内の2つのテーブルから取得されます。(amCharts)複数の(2つの)データセットを1つのチャートに入れ、それぞれのデータセットを異なるカラースキームで区別する方法は?

現在のコードでは、2つのテーブルが組み合わされてデータセットのみになります。

  • それぞれのデータセットに独自の色を付けたいと思っています。例えば。表Aのデータはすべてオレンジ色になります。テーブルBのデータはすべて青色で表示されます。
  • 各データの違いは、ラインスタイルの違いになります。データ1は太い線、データ2は点線などとなります。

ここに私が作ろうとしているグラフがあります。ここで

enter image description here

私の現在のコードとその結果である:http://jsfiddle.net/3j3s1ba7/4/

これらは、私は、テーブルamChartsドキュメントで

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

からデータを取得する線であり、それは説明されていますpossible to have two data sets, but it seems not at once

どうすればいいですか?

答えて

-1

「別個のデータセット」は必要ありません。データセットは実際には株価チャート機能であり、シリアルチャート機能ではありません。

あなたの関数generateGraphsFromDataでは、単にグラフに色とスタイルの設定を追加することができます。表1のグラフに表2のグラフとは異なるスタイルを与えることができます。どのグラフがどの表から来るのかを関数に伝える方法を見つけるだけでいいです。

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

関連する問題