缩放AmCharts气泡图中的气泡

Scaling bubbles in AmCharts Bubble Chart

本文关键字：气泡 缩放 AmCharts      更新时间：2023-09-26

我目前正在使用AmCharts创建一个气泡图。在大多数情况下，这个过程是相当容易的。

然而，AmCharts创建的气泡似乎非常奇怪地按比例缩放。例如，如果我有两个值为"9"answers"3"的项目符号，无论我做什么，图形都会将值为"9"的项目符号设置为maxBulletSize允许的最大(这可能比列更宽，这也很奇怪)，而另一个尽可能小。

我想要的是值落在1到10的范围内，其中10应该填写大约。一个列(但它不应该大于一个列，因为它可能会与其他气泡重叠)。因此，即使我实际上可能没有大小为"1"的子弹头，大小为"3"的子弹头也应该保持不变。

这可能吗?

通常，仅使用配置选项是不可能的。但是，您可以应用这个简单的解决方法:只需添加两个不可见的子弹:一个值为1，另一个值为10。它将确保任何中间值的比例始终相同。

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "xy",
  "dataProvider": [ {
    "y": 10,
    "x": 14,
    "value": 3
  }, {
    "y": 5,
    "x": 3,
    "value": 6
  }, {
    "y": 10,
    "x": 8,
    "value": 4
  }, {
    "y": 0,
    "x": 0,
    "value": 1,
    "alpha": 0
  }, {
    "y": 0,
    "x": 0,
    "value": 10,
    "alpha": 0
  } ],
  "graphs": [ {
    "balloonText": "[[value]]",
    "balloonFunction": function(item) {
      // using this in order not to display balloons for
      // hidden bullets
      if (item.alpha === 0)
        return "";
      return "" + item.dataContext.value;
    },
    "bullet": "circle",
    "lineAlpha": 0,
    "valueField": "value",
    "xField": "x",
    "yField": "y",
    "alphaField": "alpha",
    "minBulletSize": 10,
    "maxBulletSize": 100
  } ]
} );
#chartdiv {
  width: 100%;
  height: 300px;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv"></div>

相关文章：