AMCharts 5 多个数据系列显示在同一张图表上答案

【问题标题】：AMCharts 5 multiple data series showing on same chartAMCharts 5 多个数据系列显示在同一张图表上
【发布时间】：2023-01-12 20:59:48
【问题描述】：

虽然我可以在 AMCharts 4 文档中找到它，但我无法在 AMCharts 5 中找到如何执行此操作。很简单，我想要一个堆积柱形图，同时我还希望显示一组不同数据值的折线图。在下面的数据示例中，各大洲的值每年在堆叠列中相加，“预算”将绘制为同一图表上的折线图。听起来很简单，但我真的很难让它出现

am5.ready(function () {
    
    var root = am5.Root.new(cssId);
    root.setThemes([
        am5themes_Animated.new(root)
    ]);


    // Create chart        
    var chart = root.container.children.push(am5xy.XYChart.new(root, {
        panX: false,
        panY: false,
        wheelX: "panX",
        wheelY: "zoomX",
        layout: root.verticalLayout
    }));          

    var data = [{
        "year": "2021",
        "europe": 2.5,
        "namerica": 2.5,
        "asia": 2.1,
        "lamerica": 1,
        "meast": 0.8,
        "africa": 0.4,
        "budget": 155
    }, {
        "year": "2022",
        "europe": 2.6,
        "namerica": 2.7,
        "asia": 2.2,
        "lamerica": 0.5,
        "meast": 0.4,
        "africa": 0.3,
        "budget": 100
    }, {
        "year": "2023",
        "europe": 2.8,
        "namerica": 2.9,
        "asia": 2.4,
        "lamerica": 0.3,
        "meast": 0.9,
        "africa": 0.5,
        "budget": 120
    }]

     // Create axes
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
    var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        categoryField: "year",
        renderer: am5xy.AxisRendererX.new(root, {}),
        tooltip: am5.Tooltip.new(root, {})
    }));

    var xAxis2 = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        categoryField: "Rate",
        renderer: am5xy.AxisRendererX.new(root, {}),
        tooltip: am5.Tooltip.new(root, {})
    }));


    xAxis.data.setAll(data);
    xAxis2.data.setAll(data2);
           

    var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        min: 0,
        calculateTotals: false,
        renderer: am5xy.AxisRendererY.new(root, {})
    }));

    // Add legend
    // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
    var legend = chart.children.push(am5.Legend.new(root, {
        centerX: am5.p50,
        x: am5.p50
    }));

    // Add series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
    function makeSeries(name, fieldName) {
        var series = chart.series.push(am5xy.ColumnSeries.new(root, {
            name: name,
            stacked: true,
            maskBullets: false,
            xAxis: xAxis,
            yAxis: yAxis,               
            valueYField: fieldName,
            categoryXField: "year"
        }));

        var series0 = chart.series.push(am5xy.LineSeries.new(root, {
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: "year",
            categoryXField: "budget"
        }));

        chart.get("colors").set("colors", [
            am5.color("#d8764b"),
            am5.color("#ca4c6a"),
            am5.color("#188a89"),
            am5.color("#189bd0"),
            am5.color("#241047")
        ]);

        series.columns.template.setAll({
            tooltipText: "{name}, {categoryX}: {valueY}",
            tooltipY: am5.percent(10)
        });
        series.data.setAll(data);

        series0.LineSeries.template.setAll({
            tooltipText: "{name}, {categoryX}: {valueY}",
            tooltipY: am5.percent(10)
        });
        series0.data.setAll(data);


        series.bullets.push(function () {
            return am5.Bullet.new(root, {
                locationY: 1,
                sprite: am5.Label.new(root, {
                    text: "{valueYTotal}",
                    fill: am5.color(0x000000),
                    centerY: am5.p100,
                    centerX: am5.p50,
                    populateText: true
                })
            });
        });
                  
        series.appear();
        series0.appear();

        series.bullets.push(function () {
            return am5.Bullet.new(root, {
                sprite: am5.Label.new(root, {
                    text: "{valueY}",
                    fill: root.interfaceColors.get("alternativeText"),
                    centerY: am5.p50,
                    centerX: am5.p50,
                    populateText: true
                })
            });
        });

        legend.data.push(series);
    }

    makeSeries("Europe", "europe");
    makeSeries("North America", "namerica");
    makeSeries("Asia", "asia");
    makeSeries("Latin America", "lamerica");
    makeSeries("Middle East", "meast");
    makeSeries("Africa", "africa");
    
    chart.appear(1000, 100);

});

}

【问题讨论】：

标签： amcharts5

【解决方案1】：

你可以通过像这样添加一个 col 来实现它：

var data = [{
  "year": "2022",
  "value1": 10,
  "value2": 2.5,
  "value3": 1
}]

稍后您将不得不更改文本和值以匹配它。我真的不知道为什么他们在从 amcharts 4 更新到 5 时只是抛出像圆柱体这样的图形

【讨论】：