Gestapeltes Säulendiagramm aus mehreren Datasets

Question

Ich habe versucht, ein Panel in einem Amstock-Diagramm zu erstellen, das ein gestapeltes Säulendiagramm enthält. Aus irgendeinem Grund zeigt es nur den ersten Datensatz. Im Gegensatz zum angegebenen Beispiel (https://www.amcharts.com/kbase/using-stacked-graphs-on-stock-chart/) stammen meine Daten aus mehreren Datensätzen. Ich denke, das Problem kann mein Verständnis von Feldmappings sein, aber ich bin unsicher.

Link zu einer vereinfachten Version des Codes: 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); 

Eine Lösung könnte sein, nur die Datensätze Refactoring aber in der realen Version können die Datensätze sehr groß, so dass es toll wäre, wenn Dies kann vermieden werden.

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Um mehrere Graphen von mehreren Datensätzen zu zeigen, nicht nur Sie die Datenmenge compared Eigenschaft auf true setzen müssen, müssen Sie auch die comparable Eigenschaft auf true die stockGraph so eingestellt, dass sie Daten von den anderen verglichen Datensätze zeigen ; Sie haben diese Einstellung in Ihrem columnGraphs-Array verpasst. Da Sie eine gestapelte Spalte haben möchten, müssen Sie auch die Eigenschaften mit dem Präfix compareGraph festlegen, um das Erscheinungsbild der verglichenen Diagramme anzupassen. In diesem Fall möchten Sie die Eigenschaft compareGraphType auf "column" und compareGraphFillAlphas auf einen Wert ungleich null setzen, um Ihren Spalten eine Füllung hinzuzufügen.

Aktualisiert Code:

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