amCharts Stock Chart,显示多个数据集

时间:2016-01-04 14:00:49

标签: javascript amcharts amstock

我查看了amCharts的示例和文档。

这是我的问题:图表只显示一行,而不是两个数据集中定义的两行:

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

就像代码没有提取第二个数据集一样。

1 个答案:

答案 0 :(得分:3)

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

默认情况下,它只绘制主要选定数据集的图表 - 第一个。

为了绘制其他数据集的图形,需要对它们进行“比较”。

可以通过在数据集选择器中选择它们(如果已启用一个)进行比较,或者通过将数据集的compared属性设置为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设置来设置这些设置。即:

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