未显示多个数据集的 amCharts 股票图表 [英] amCharts Stock Chart with multiple datasets not showing

问题描述

我浏览了 amCharts 的示例和文档.

I went through the examples and docs of amCharts.

这是我的问题:图表只显示一条线，而不是 2 个数据集中定义的两条线:

Here is my problem: the chart is showing just a line and not two as defined in the 2 datasets:

var chart;

function createStockChart() {
  chart = new AmCharts.AmStockChart();


  // DATASETS //////////////////////////////////////////

    var dataSet = new AmCharts.DataSet();
    chart.dataSets = [{
      title: "XWD.TO",
      color: "#000000",
      fieldMappings: [ {
      fromField: "value",
      toField: "value"
      }, {
      fromField: "volume",
      toField: "volume"
      } ],
      dataProvider: chartData,
      categoryField: "date"
    },

    {
      title: "portfolio-top-9-12-2015",
      color: "#FF0000",
      fieldMappings: [ {
      fromField: "value",
      toField: "value"
      }, {
      fromField: "volume",
      toField: "volume"
      } ],
      dataProvider: chartData2,
      categoryField: "date"
    }];



  // PANELS ///////////////////////////////////////////
  // first stock panel
  var stockPanel1 = new AmCharts.StockPanel();
  stockPanel1.showCategoryAxis = false;
  stockPanel1.title = "Price";
  stockPanel1.percentHeight = 70;

  // graph of first stock panel
  var graph1 = new AmCharts.StockGraph();
  graph1.valueField = "value";
  graph1.comparable = true;
  graph1.compareField = "value";
  graph1.type = "smoothedLine";
  graph1.bullet = "round";
  graph1.lineThickness = 2;
  graph1.bulletBorderColor = "#FFFFFF";
  graph1.bulletBorderAlpha = 1;
  graph1.bulletBorderThickness = 3;
  stockPanel1.addStockGraph(graph1);

}

对于整页代码:http://www.fanta-trade.eu/chart.php?tipo=a&code=XWD.TO&compare_top=1&time=1449658858

就像代码没有获取第二个数据集一样.

It's like if the code is not fetching the second dataset.

推荐答案

Stock Chart 确实支持多个数据集.但是，默认情况下它不会为每个数据集绘制图形.

The Stock Chart does support multiple data sets. However, it won't draw a graph for each of the data sets by default.

默认情况下，它只为主要选定的数据集绘制图形 - 第一个.

By default it only draws a graph for main selected data set - the first one.

为了绘制其他数据集的图形，需要对它们进行比较".

In order for it to draw graphs for other data sets, they need to be "compared".

它们可以通过在数据集选择器中选择它们来比较(如果你启用了)，或者通过设置数据集的将 属性与true 进行比较.

They can be compared by selecting them in Data Set selector (if you have one enabled), or programatically by setting data set's compared property to true.

{
  title: "portfolio-top-9-12-2015",
  color: "#FF0000",
  fieldMappings: [ {
    fromField: "value",
    toField: "value"
  }, {
    fromField: "volume",
    toField: "volume"
  } ],
  dataProvider: chartData2,
  categoryField: "date",
  compared: true
}

另请注意，比较图使用不同的外观设置.您可以通过图表的 compareGraph 设置来设置这些设置.即:

Please also note, that compared graphs use different appearance settings. You can set those settings via graph's compareGraph setting. I.e.:

// graph of first stock panel
var graph1 = new AmCharts.StockGraph();
graph1.valueField = "value";
graph1.comparable = true;
graph1.compareField = "value";
graph1.type = "smoothedLine";
graph1.bullet = "round";
graph1.lineThickness = 2;
graph1.bulletBorderColor = "#FFFFFF";
graph1.bulletBorderAlpha = 1;
graph1.bulletBorderThickness = 3;
graph1.compareGraph = {
  "type": "smoothedLine",
  "bullet": "round",
  "lineThickness": 2,
  "bulletBorderColor": "#FFFFFF",
  "bulletBorderAlpha": 1,
  "bulletBorderThickness": 3
};
stockPanel1.addStockGraph(graph1);

这篇关于未显示多个数据集的 amCharts 股票图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！