Столбчатая диаграмма из нескольких наборов данных

Question

Я пытаюсь создать панель в диаграмме Amstock, которая содержит столбчатую диаграмму с накоплением. По какой-то причине он показывает только первый набор данных. В отличие от приведенного примера ( https://www.amcharts.com/kbase/using-stacked-graphs-on-stock-chart/) мои данные поступают из нескольких наборов данных. Я думаю, что проблема может заключаться в моем понимании сопоставления полей, но я не уверен.

Ссылка на упрощенную версию кода: 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's comparable свойство true, чтобы оно показывало данные из других сравниваемых наборов данных; вы пропустили этот параметр в массиве columnGraphs. Поскольку вы хотите столбец с накоплением, вы также должны установить свойства с compareGraph префикс для настройки внешнего вида сравниваемых графиков. В этом случае вы хотите установить compareGraphType свойство "столбец" и 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
    });
});

Обновлен плункер