AmCharts传奇

Question

我试图复制下面的图表

​

​

我遇到的问题是如何使图例在左边和中间的每一个盒子堆叠(在每个方框中的系列词)。我搜索过amCharts，但没有运气。是否有办法这样做，或者如何覆盖或扩展amCharts以实现此行为？

非常感谢。

Answer 1

要显示值标签，请使用labelText proeprty。

只需在图表中将其设置为“[值]”即可。即：

"graphs": [{
  ...
  "labelText": "[[value]]"
}]

对于左边的“图例”，您需要使用导轨。它允许在某些预设值处放置行(可选)和标签。不过，您需要预先计算放置它们的值。

下面是一个完整的工作示例：

​

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataProvider": [{
    "year": 2011,
    "value1": 13,
    "value2": 5,
    "value3": 4
  }, {
    "year": 2012,
    "value1": 22,
    "value2": 4,
    "value3": 5
  }, {
    "year": 2013,
    "value1": 35,
    "value2": 7,
    "value3": 4
  }],
  "valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "labelsEnabled": false,
    "tickLength": 0,
    "totalText": "[[total]]",
    "guides": [{
      "value": 6.5,
      "label": "Series #1",
      "fontSize": 15
    }, {
      "value": 15.5,
      "label": "Series #2",
      "fontSize": 15
    }, {
      "value": 20,
      "label": "Series #3",
      "fontSize": 15
    }]
  }],
  "graphs": [{
    "fillAlphas": 1,
    "fillColors": "#a0b1cf",
    "labelText": "[[value]]",
    "lineAlpha": 1,
    "lineColor": "#000",
    "title": "value1",
    "type": "column",
    "color": "#000000",
    "valueField": "value1"
  }, {
    "fillAlphas": 1,
    "fillColors": "#c5cde0",
    "labelText": "[[value]]",
    "lineAlpha": 1,
    "lineColor": "#000",
    "title": "value1",
    "type": "column",
    "color": "#000000",
    "valueField": "value2"
  }, {
    "fillAlphas": 1,
    "fillColors": "#dde6eb",
    "labelText": "[[value]]",
    "lineAlpha": 1,
    "lineColor": "#000",
    "title": "value1",
    "type": "column",
    "color": "#000000",
    "valueField": "value3"
  }],
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  }

});

#chartdiv {
  width: 400px;
  height: 400px;
}

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>

​