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

为了显示来自多个数据集的多个图表，您不仅需要将dataSet的compared属性设置为true，还需要设置stockGraph＆＃39; s {{3} } property为true，以便显示来自其他比较数据集的数据;您在columnGraphs数组中缺少此设置。由于您需要堆叠列，因此您还必须使用compareGraph前缀设置属性以调整比较图表。出现。在这种情况下，您要将comparable属性设置为＆＃34;列＆＃34;和compareGraphType为非零值，以便为列添加填充。

更新的代码：

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

compareGraphFillAlphas

多个数据集

1 个答案: