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属性。

amcharts上每列的底部图像

1 个答案: