javascript - 圆环图内的图像 - AmCharts

Question

我正在尝试将图像放入饼图的内半径内。所以它看起来像这样:

我发现的最接近的是 title and subtitle inside 。但它会在 de svg 中生成一个文本标记，因此我找不到显示图像的方法。

AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "none",
"allLabels": [{
    "text": "This is chart title",
    "align": "center",
    "bold": true,
    "y": 220
},{
    "text": "Ans here's the subtitle as well",
    "align": "center",
    "bold": false,
    "y": 250
}],
"dataProvider": [{
    "title": "New",
    "value": 4852
}, {
    "title": "Returning",
    "value": 9899
}],
"titleField": "title",
"valueField": "value",
"labelRadius": -130,
"radius": "42%",
"innerRadius": "60%",
"labelText": ""
});

谢谢!

Answer 1

从技术上讲，不可能在 amCharts 饼图中添加图像作为标签。

但是，您可以通过添加该图像作为图表容器的背景来轻松解决这个问题。即:

#chartdiv {
  width: 210px;
  height: 210px;
  background: transparent url(logo.png) no-repeat center 70px;
}

这是应用上述内容的图表:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "dataProvider": [{
    "slice": "First",
    "value": 34
  }, {
    "slice": "Second",
    "value": 66
  }],
  "valueField": "value",
  "titleField": "slice",
  "labelsEnabled": false,
  "pullOutRadius": 0,
  "innerRadius": 60,
  "allLabels": [{
    "text": "34%",
    "color": "#f40000",
    "size": 20,
    "align": "center",
    "y": "55%"
  }]
});

#chartdiv {
  width: 210px;
  height: 210px;
  margin: 0 auto;
  background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/so1.png) no-repeat center 70px;
}

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