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

Question

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

链接到一个简化版本的代码：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属性设置为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 
    }); 
}); 

Updated plunker