来自多个数据集的堆积柱形图

Question

我正在尝试在包含堆积柱形图的 amstock 图表中创建面板。出于某种原因，它只显示第一个数据集。与给定的示例 (https://www.amcharts.com/kbase/using-stacked-graphs-on-stock-chart/) 不同，我的数据来自多个数据集。我认为问题可能出在我对字段映射的理解上，但我不确定。

Link 简化版代码：https://plnkr.co/edit/AUdN0T1UM4c9PkbFec1v?p=preview

const sources = ['source_a', 'source_b', 'source_c', 'source_d']
let dataSources = {};
let generateData = () => {
  var data = [];
  var days = 30;
  var firstDate = new Date();
  firstDate.setHours(0, 0, 0, 0);
  firstDate.setDate(firstDate.getDate() - days);

  for (let i = 0; i < days; i++) {

    let newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);
    data.push({
      'line_value': Math.round(Math.random() * 1000),
      'column_value': Math.round(Math.random() * 100),
      'date': newDate
    });
  }
  return data;
}

sources.forEach((key) => {
  dataSources[key] = generateData();
});



let dataSets = [];
sources.forEach((key, index) => {
  dataSets.push({
    title: key,
    fieldMappings: [{
      fromField: 'line_value',
      toField: 'line_value' + index
    }, {
      fromField: 'column_value',
      toField: 'column_value' + index
    }],
    categoryField: "date",
    dataProvider: dataSources[key],
    compared: true
  })
});


var lineGraphs = [];
var columnGraphs = [];
sources.forEach((key, index) => {
  lineGraphs.push({
    id: 'g' + index,
    type: 'line',
    comparable: true,
    compareField: 'line_value' + index,
    lineThickness: 2,
    fillAlphas: 0.3,
    useDataSetColors: false,
    title: key
  });
  columnGraphs.push({
    id: 'g' + (sources.length + index),
    type: "column",
    valueField: 'column_value' + index,

    fillAlphas: 0.8,
    useDataSetColors: false,
    title: key
  });
});

let config = {
  type: "stock",
  "theme": "light",

  dataSets: dataSets,


  panels: [{
      title: "Lines",
      recalculateToPercents: "never",
      showCategoryAxis: false,
      percentHeight: 70,
      valueAxes: [{
        id: "v1",
        dashLength: 5,
        stackType: "regular"
      }],
      categoryAxis: {
        dashLength: 5
      },
      stockGraphs: lineGraphs,
      stockLegend: {
        valueTextRegular: undefined,
        periodValueTextComparing: "[[percents.value.close]]%"
      }
    },

    {
      title: "Columns",
      recalculateToPercents: "never",
      percentHeight: 30,
      marginTop: 1,
      showCategoryAxis: true,
      valueAxes: [{
        dashLength: 5,
        stackType: "regular"
      }],

      categoryAxis: {
        dashLength: 5
      },

      stockGraphs: columnGraphs,

      stockLegend: {
        periodValueTextRegular: "[[value.close]]"
      }

    }
  ],

  chartScrollbarSettings: {

    graph: "g1",
    graphType: "line",
    usePeriod: "WW"
  },


  chartCursorSettings: {
    valueLineBalloonEnabled: true,
    valueLineEnabled: true
  },

  periodSelector: {
    position: "bottom",
    periods: [{
      period: "DD",
      count: 10,
      label: "10 days"
    }, {
      period: "MM",
      selected: true,
      count: 1,
      label: "1 month"
    }, {
      period: "YYYY",
      count: 1,
      label: "1 year"
    }, {
      period: "YTD",
      label: "YTD"
    }, {
      period: "MAX",
      label: "MAX"
    }]
  },
  "export": {
    "enabled": true
  }
};

console.log(config);

var chart = AmCharts.makeChart("chartdiv", config);

一个解决方案可能是重构数据集，但在实际版本中，数据集可能非常大，所以如果可以避免这种情况就太好了。

如有任何帮助，我们将不胜感激！

Answer 1

为了显示来自多个数据集的多个图表，您不仅需要将数据集的 compared 属性设置为 true，还需要将 stockGraph 的 comparable property to true so that it will show data from the other compared datasets; you were missing this setting in your columnGraphs array. Since you want a stacked column, you also have to set the properties with the compareGraph prefix to adjust the compared graphs' appearance. In this case you want to set the compareGraphType property to "column" and compareGraphFillAlphas 设置为用于向您的列添加填充的非零值。

更新代码：

sources.forEach((key, index) => {
    // ...
    columnGraphs.push({
        id: 'g' + (sources.length + index),
        type: "column",
        valueField: 'column_value' + index,

        // ** added **
        comparable: true,
        compareGraphType: 'column',
        compareGraphFillAlphas: .8,
        // **

        fillAlphas: 0.8,
        useDataSetColors: false,
        title: key
    });
});

Updated plunker

来自多个数据集的堆积柱形图

Stacked column chart from multiple datatsets

amcharts

amstock