javascript - AmCharts 传奇

Question

我正在尝试复制以下图表

我遇到的问题是如何在每个堆叠的盒子的左侧和中间制作图例(每个盒子中的系列词)。我搜索了 amCharts 但没有运气。有没有办法做到这一点或如何覆盖或扩展 amCharts 以实现此行为？

非常感谢。

Answer 1

要显示值标签，请使用 labelText属性(property)。

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

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

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

这是一个完整的工作示例:

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>