amcharts每列底部的图像

Question

我尝试收集有关是否可以在 100% 堆叠条形图中每列底部放置不同图像的信息。

我已经看到可以修改类别标签的某些属性并将图像放在每个条形上方作为http://www.amcharts.com/demos/column-chart-images-top/，但我需要正好相反。

换句话说，我想让列的底部加载一个图像，替换 x 轴和类别标签。

提前致谢。

Answer 1

不幸的是，类别轴不允许使用图像代替类别标签。

也没有办法使图形中的自定义项目符号“滴流”到绘图区域之外。

您可以做的是将这些自定义图标放在类别轴线的正上方。

为此，您需要：

1) 向您的数据中添加包含所有零值的附加字段。 2) 添加一个单独的图表，该图表将使用这些字段并显示自定义项目符号。 3）使“子弹图”不可堆叠（stackable: false），不可聚集（clustered: false），一般不可见（visibleInLegend: false，fillAlphas: 0，lineAlpha: 0，showBalloon: false）

这是一个工作示例：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "name": "John",
    "points": 35022,
    "color": "#7F8DA9",
    "zero": 0,
    "bullet": "//www.amcharts.com/lib/3/images/0.gif"
  }, {
    "name": "Damon",
    "points": 65456,
    "color": "#FEC514",
    "zero": 0,
    "bullet": "//www.amcharts.com/lib/3/images/1.gif"
  }, {
    "name": "Patrick",
    "points": 45724,
    "color": "#DB4C3C",
    "zero": 0,
    "bullet": "//www.amcharts.com/lib/3/images/2.gif"
  }, {
    "name": "Mark",
    "points": 13654,
    "color": "#DAF0FD",
    "zero": 0,
    "bullet": "//www.amcharts.com//lib/3/images/3.gif"
  }],
  "valueAxes": [{
    "maximum": 80000,
    "minimum": 0,
    "axisAlpha": 0,
    "dashLength": 4,
    "position": "left"
  }],
  "startDuration": 1,
  "graphs": [{
    "balloonText": "<span style='font-size:13px;'>[[category]]: <b>[[value]]</b></span>",
    "colorField": "color",
    "fillAlphas": 0.8,
    "lineAlpha": 0,
    "type": "column",
    "valueField": "points"
  }, {
    "showBalloon": false,
    "bulletOffset": 16,
    "bulletSize": 34,
    "customBulletField": "bullet",
    "fillAlphas": 0,
    "lineAlpha": 0,
    "type": "column",
    "visibleInLegend": false,
    "clustered": false,
    "stackable": false,
    "valueField": "zero"
  }],
  "categoryField": "name",
  "categoryAxis": {
    "axisAlpha": 0,
    "gridAlpha": 0,
    "tickLength": 0
  }
});

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 200px;"></div>

另外，如果你不需要分类轴上的文字标签，你可以设置为labelsEnabled: false属性。