如何在图表上堆叠线形：AMCharts3

Question

因此，在我的图表上，我有条形和线形，我希望像下面的图像一样堆叠条形序列，但我不想将线形序列堆叠。Example of the current Chart

在示例图像中，前3个点的顶线序列值为100,000，但其值为150,000，而底线序列的值为50,000，且值为50,000，所以我认为它们正在堆叠，我不想发生。

我希望图表看起来完全一样，但是线系列在yAxis上位于正确的值。

let {dataProvider, displayCurrency} = this.props;
    var config = {
        "type":"serial",
        "categoryField":"category",
        "fontFamily":"arial",
        "categoryAxis":{
            "gridPosition":"start",
            "title":"Time",
            "titleRotation":0
        },
        "trendLines":[],
        "graphs":[
            {
                "balloonText": "[[title]] of [[category]]:[[value]]",
                "balloonFunction" : formatGraphMoneyBallon("Hedging"),
                "balloonColor": "#000066",
                "fillColors": "#000066",
                "lineColor": "#000066",
                "fillAlphas": 1,
                "id": "coverUpper",
                "title": "Hedging",
                "newStack": false,
                "type": "column",
                "valueField": "hedging"
            },
            {
                "balloonText": "[[title]] of [[category]]:[[value]]",
                "balloonFunction" : formatGraphMoneyBallon("Maximum Additional Hedging"),
                "balloonColor": "#000066",
                "fillColors": "#000066",
                "lineColor": "#000066",
                "fillAlphas": 1,
                "id": "coverAdditional",
                "title": "Maximum Additional Hedging",
                "type": "column",
                "newStack": false,
                "valueField": "maxAdditionalHedging",
                "pattern": {
                    "url": "https://www.amcharts.com/lib/3/patterns/black/pattern5.png",
                    "width": 4,
                    "height": 4
                      }
            }, {
                "balloonText": "[[title]] of [[category]]:[[value]]",
                "balloonFunction" : formatGraphMoneyBallon("Forecasted Cashflows"),
                "fillAlphas": 1,
                "balloonColor": "#B0DE09",
                "fillColors": "#B0DE09",
                "lineColor": "#B0DE09",
                "id": "cfGraph",
                "title": "Forecasted Cashflows",
                "type": "column",
                "newStack": true,
                "valueField": "exposure"
            }, {
                "balloonText": "[[title]] of [[category]]:[[value]]",
                "balloonFunction" : formatGraphMoneyBallon("Policy Minimum"),
                "bullet": "triangleUp",
                "balloonColor": "#014310",
                "fillColors": "#014310",
                "lineColor": "#014310",
                "bulletAlpha": 0.6,
                "dashLength": 7,
                "id": "polMin",
                "valueAxis": "dollarAxis",
                "newStack": true,
                "title": "Policy Minimum",
                "valueField": "minHedge"
            }, {
                "balloonText": "[[title]] of [[category]]:[[value]]",
                "balloonFunction" : formatGraphMoneyBallon("Policy Maximum"),
                "bullet": "triangleDown",
                "type": "line",
                "balloonColor": "#014310",
                "fillColors": "#014310",
                "lineColor": "#014310",
                "bulletAlpha": 0.6,
                "dashLength": 7,
                "newStack": true,
                "id": "polMax",
                "valueAxis": "dollarAxis",
                "title": "Policy Maximum",
                "valueField": "maxHedge"
            }
        ],
        "guides":[],
        "valueAxes":[
            {"id":"dollarAxis","stackType":"regular","title":"Amount " + displayCurrency}
        ],
        "allLabels":[],
        "balloon":{},
        "legend":{
            "enabled":true,
            "useGraphSettings":true,
            "spacing": 0,
            "valueWidth":15
        },
        "export":{"enabled":true},
        "dataProvider":dataProvider
    }

Answer 1

堆叠是通过轴完成的。如果不希望将线堆叠在一起，请将其放置在未设置stackType的单独的值轴中，然后通过valueAxis属性将图形链接到值轴id。您还需要考虑禁用线的“值轴”标签，并网格化和同步最小/最大：

graphs:[{
  type: "line",
  // ...
  valueAxis: "dollarAxis-line"
 },
  // ...
],
valueAxes: [
  {
    "id": "dollarAxis",
    "includeHidden": true,
     // ...
  },
  {
    "id": "dollarAxis-line",
    "labelsEnabled": false,
    "gridAlpha": 0,
    "axisAlpha": 0,
  }
],
"listeners": [{
  "event": "init",
  "method": function(e) {
    // sync axes
    e.chart.valueAxes[0].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
    e.chart.valueAxes[0].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].min);
    e.chart.valueAxes[1].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
    e.chart.valueAxes[1].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].min);
    e.chart.validateData();

  }
}]

编辑：如果从空图表开始，则可能要考虑使用dataUpdated事件，以便在更新dataProvider之后它将重新同步轴。 validateData方法触发此事件，因此您需要将此调用包装在检查标志的条件中，以使图表不会继续无限调用此方法。

  "listeners": [{
    "event": "dataUpdated",
    "method": function(e) {
      if (!e.chart.updating) {
        e.chart.updating = true;
        // sync axes
        e.chart.valueAxes[0].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
        e.chart.valueAxes[0].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].mix);
        e.chart.valueAxes[1].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
        e.chart.valueAxes[1].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].mix);
        e.chart.validateData();
        e.chart.updating = false; //or wrap in a setTimeOut as validateData is an async call
      }
    }
  }]

下面的演示：

AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "categoryField": "category",
  "fontFamily": "arial",
  "categoryAxis": {
    "gridPosition": "start",
    "title": "Time",
    "titleRotation": 0
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "balloonColor": "#000066",
      "fillColors": "#000066",
      "lineColor": "#000066",
      "fillAlphas": 1,
      "id": "coverUpper",
      "title": "Hedging",
      "newStack": false,
      "type": "column",
      "valueField": "hedging"
    },
    {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "balloonColor": "#000066",
      "fillColors": "#000066",
      "lineColor": "#000066",
      "fillAlphas": 1,
      "id": "coverAdditional",
      "title": "Maximum Additional Hedging",
      "type": "column",
      "newStack": false,
      "valueField": "maxAdditionalHedging",
      "pattern": {
        "url": "https://www.amcharts.com/lib/3/patterns/black/pattern5.png",
        "width": 4,
        "height": 4
      }
    }, {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "balloonColor": "#B0DE09",
      "fillColors": "#B0DE09",
      "lineColor": "#B0DE09",
      "id": "cfGraph",
      "title": "Forecasted Cashflows",
      "type": "column",
      "newStack": true,
      "valueField": "exposure"
    }, {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "bullet": "triangleUp",
      "balloonColor": "#014310",
      "fillColors": "#014310",
      "lineColor": "#014310",
      "bulletAlpha": 0.6,
      "dashLength": 7,
      "id": "polMin",
      "valueAxis": "dollarAxis-line",
      "title": "Policy Minimum",
      "valueField": "minHedge"
    }, {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "bullet": "triangleDown",
      "type": "line",
      "balloonColor": "#014310",
      "fillColors": "#014310",
      "lineColor": "#014310",
      "bulletAlpha": 0.6,
      "dashLength": 7,
      "id": "polMax",
      "valueAxis": "dollarAxis-line",
      "title": "Policy Maximum",
      "valueField": "maxHedge"
    }
  ],
  "guides": [],
  "valueAxes": [{
      "id": "dollarAxis",
      "stackType": "regular",
      "includeHidden": true,
      "title": "Amount ($)"
    },
    {
      "id": "dollarAxis-line",
      "stackType": "none",
      "labelsEnabled": false,
      "gridAlpha": 0,
      "axisAlpha": 0
    }
  ],
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "useGraphSettings": true,
    "spacing": 0,
    "valueWidth": 15
  },
  "export": {
    "enabled": true
  },
  "dataProvider": [{
      "category": "Category 1",
      "minHedge": 151218,
      "hedging": 111436,
      "maxHedge": 236849,
      "maxAdditionalHedging": 272065,
      "additionalHedging": 233236,
      "exposure": 163731
    },
    {
      "category": "Category 2",
      "minHedge": 150517,
      "hedging": 137299,
      "maxHedge": 258805,
      "maxAdditionalHedging": 254932,
      "additionalHedging": 183495,
      "exposure": 111847
    },
    {
      "category": "Category 3",
      "minHedge": 158456,
      "hedging": 198219,
      "maxHedge": 231274,
      "maxAdditionalHedging": 259615,
      "additionalHedging": 187108,
      "exposure": 168738
    },
    {
      "category": "Category 4",
      "minHedge": 167931,
      "hedging": 173121,
      "maxHedge": 263334,
      "maxAdditionalHedging": 260449,
      "additionalHedging": 229972,
      "exposure": 156174
    },
    {
      "category": "Category 5",
      "minHedge": 164449,
      "hedging": 157823,
      "maxHedge": 268980,
      "maxAdditionalHedging": 268896,
      "additionalHedging": 180031,
      "exposure": 100893
    },
    {
      "category": "Category 6",
      "minHedge": 166465,
      "hedging": 128504,
      "maxHedge": 241036,
      "maxAdditionalHedging": 269858,
      "additionalHedging": 230233,
      "exposure": 117158
    },
    {
      "category": "Category 7",
      "minHedge": 167117,
      "hedging": 110649,
      "maxHedge": 229749,
      "maxAdditionalHedging": 262671,
      "additionalHedging": 201500,
      "exposure": 188282
    },
    {
      "category": "Category 8",
      "minHedge": 151167,
      "hedging": 123489,
      "maxHedge": 249919,
      "maxAdditionalHedging": 268805,
      "additionalHedging": 206302,
      "exposure": 120797
    },
    {
      "category": "Category 9",
      "minHedge": 154961,
      "hedging": 185898,
      "maxHedge": 269185,
      "maxAdditionalHedging": 271949,
      "additionalHedging": 173116,
      "exposure": 184312
    },
    {
      "category": "Category 10",
      "minHedge": 154385,
      "hedging": 141307,
      "maxHedge": 234509,
      "maxAdditionalHedging": 274889,
      "additionalHedging": 216132,
      "exposure": 111974
    }
  ],
  "listeners": [{
    "event": "dataUpdated",
    "method": function(e) {
      if (!e.chart.updating) {
        e.chart.updating = true;
        // sync axes
        e.chart.valueAxes[0].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
        e.chart.valueAxes[0].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].mix);
        e.chart.valueAxes[1].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
        e.chart.valueAxes[1].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].mix);
        e.chart.validateData();
        e.chart.updating = false; //or wrap in a setTimeOut as validateData is an async call
      }
    }
  }]
});

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>