0

我试图在包含堆积柱形图的 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);

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

任何帮助将不胜感激！

4

1 回答 1

0

为了显示来自多个数据集的多个图表，不仅需要将数据集的属性设置compared为 true，还需要将 stockGraph 的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
    });
});

更新 plunker

于 2017-07-27T10:56:44.200 回答