(amCharts) 如何将多个（两个）数据集放在一个图表中，并用不同的配色方案区分每个数据集？

Question

我正在尝试从两个数据集制作图表。这两个数据都取自 HTML 中的两个表。

使用我目前拥有的代码，这两个表仅合并为 一个 数据集。我想将每个表分离到自己的数据集，因为：

• 我想让每个数据集都有自己的颜色。例如。表 A 中的数据将全部显示为橙色；表 B 中的数据将全部显示为蓝色。
• 每个数据之间的差异将来自其线型。数据 1 将有较粗的线，数据 2 将有虚线，等等。

这是我打算制作的图表。

这是我当前的代码及其结果：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。

知道怎么做吗？

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