在 AmCharts 气泡图中缩放气泡

Question

我目前正在使用 AmCharts 创建气泡图。在大多数情况下，这个过程非常简单。

然而，我发现 AmCharts 创建的气泡之间的比例似乎非常奇怪。如果我例如有两个值为“9”和“3”的项目符号，无论我做什么，图表都会将值为“9”的项目符号设置为 maxBulletSize 允许的最大（这可以比列宽也很奇怪）和另一个尽可能小。

我想要的是让值落在 1 到 10 的范围内，其中 10 应该填写大约。一列（但是它不应该大于一列，因为它可以与其他气泡重叠）。因此，即使我实际上可能没有“1”号的子弹，“3”号也应该保持不变。

这可能吗？

Answer 1

通常情况下，仅使用配置选项是不可能的。但是，您可以应用这个简单的解决方法：只需添加两个不可见的项目符号：一个值为 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>

在 AmCharts 气泡图中缩放气泡

Scaling bubbles in AmCharts Bubble Chart

javascript

amcharts