带折线图的 Amcharts 堆积柱形图将值轴放在折线图下方

Question

我准备了一个堆叠柱形图与折线图相结合的图表。现在堆叠图的总值，即值轴应该在堆叠列上。但总值显示在折线图上。没有折线图就完美了。但是对于折线图，总价值会上升。这是我的代码

$scope.chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "none",
        "legend": {
            "position": "top",
            "useGraphSettings": true,
            "align": "center"
        },
        "dataProvider": $scope.monthly_chart_data,
        "valueAxes": [{
            "stackType": "regular",
            "axisAlpha": 0.3,
            "gridAlpha": 0,
            "totalText": "[[total]]"
        }],
        "graphs": [{
            "balloonText": "<span style='font-size:14px'><b>[[value]]</b></span>",
            "fillAlphas": 0.8,
            "lineAlpha": 0.0,
            "title": "Betrag",
            "type": "column",
            "color": "#000000",
            "valueField": "Rechnung",
            "fillColors": "#003d6a"
        }, {
            "balloonText": "<span style='font-size:14px'><b>[[value]]</b></span>",
            "fillAlphas": 0.8,
            "lineAlpha": 0.0,
            "title": "Bestellung",
            "type": "column",
            "color": "#000000",
            "valueField": "Bestellung",
            "fillColors": "#8673a4"
        }, {
            "id": "graph2",
            "lineThickness": 1.5,
            "fillAlphas": 0,
            "lineAlpha": 1,
            "lineColor": "#e95f30",
            "title": "Budget",
            "valueField": "Budget",
            "dashLengthField": "dashLengthLine",
            "stackable": false
        }],
        "categoryField": "month",
        "categoryAxis": {
            "gridPosition": "start",
            "axisAlpha": 0,
            "gridAlpha": 0,
            "position": "left"
        },
        "numberFormatter" : {
            "precision": -1,
            "decimalSeparator": ",",
            "thousandsSeparator": "."
        }
    });

如何将总值（即 valueaxis）置于堆叠柱上方但低于折线图？任何帮助，将不胜感激。提前致谢。

Answer 1

您的线轴正在添加到同一个堆栈； stacked 适用于整个值轴和所有与之关联的图表，而不仅仅是特定的图表或类型，因此该线也包含在堆栈和总计中。如果您不希望该行包含在堆栈及其总计中，只需将其分配给不同的值轴即可。

    "synchronizeGrid": true, //optional if you want both axes to have the same scale. Doesn't always work, though.
    "valueAxes": [{
        "stackType": "regular",
        "axisAlpha": 0.3,
        "gridAlpha": 0,
        "totalText": "[[total]]"
    },{
        "id": "valueAxis2",  //create second axis for the line graph
        "axisAlpha": 0,
        "position": "right",
        "gridAlpha": 0
    }],
    "graphs": [
     // ...
     {
        "id": "graph2",
        "valueAxis": "valueAxis2", //assign line graph to valueAxis2
        "lineThickness": 1.5,
        "fillAlphas": 0,
        "lineAlpha": 1,
        "lineColor": "#e95f30",
        "title": "Budget",
        "valueField": "Budget",
        "dashLengthField": "dashLengthLine",
        "stackable": false
    }]

带折线图的 Amcharts 堆积柱形图将值轴放在折线图下方

Amcharts Stacked Column Chart with Line Chart put valueaxis below line chart

javascript

line

stacked

amcharts

angularjs