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气泡图中缩放气泡

1 个答案: