属性在 Amcharts 中设置气球对齐？

Question

有没有人知道属性将 amcharts 中气球的对齐方式更改为 图 1 中的对齐方式。默认情况下，我的项目中呈现的图表中的气球对齐方式如 图 2 所示，有时会导致截断和溢出，如 图 3 所示如果气球文本太 long.Hoping ，如 图 1 所示的气球文本对齐将帮助我解决这个问题。

Answer 1

您可能正在寻找的是翻转气球的固定位置。

这可以通过在 balloon 设置中设置 fixedPosition 来实现。即：

"balloon": {
    "fixedPosition": true
}

另一个解决方案是启用chart cursor。启用图表光标后，所有气球将自适应地显示在列中心的左侧或右侧。

这是一个图表光标，设置为除了悬停的列段的单个气球之外不显示任何内容：

"chartCursor": {
    "cursorAlpha": 0,
    "oneBalloonOnly": true
}

最后，很长的连续字符串也可能是个问题。我建议您使用 \n 符号在其中添加换行点。即：

"title": "North Americaaaaa\naaaaaaaaaaaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaaaaaaa",

这是一个完整的工作演示：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "legend": {
    "horizontalGap": 10,
    "maxColumns": 1,
    "position": "right",
    "useGraphSettings": true,
    "markerSize": 10
  },
  "dataProvider": [{
    "year": 2003,
    "europe": 2.5,
    "namerica": 2.5,
    "asia": 2.1,
    "lamerica": 0.3,
    "meast": 0.2,
    "africa": 0.1
  }, {
    "year": 2004,
    "europe": 2.6,
    "namerica": 2.7,
    "asia": 2.2,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
  }, {
    "year": 2005,
    "europe": 2.8,
    "namerica": 2.9,
    "asia": 2.4,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
  }],
  "valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0.3,
    "gridAlpha": 0
  }],
  "graphs": [{
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Europe",
    "type": "column",
    "color": "#000000",
    "valueField": "europe"
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "North Americaaaaa\naaaaaaaaaaaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaaaaaaa",
    "type": "column",
    "color": "#000000",
    "valueField": "namerica"
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Asia-Pacific",
    "type": "column",
    "color": "#000000",
    "valueField": "asia"
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Latin America",
    "type": "column",
    "color": "#000000",
    "valueField": "lamerica"
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Middle-East",
    "type": "column",
    "color": "#000000",
    "valueField": "meast"
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Africa",
    "type": "column",
    "color": "#000000",
    "valueField": "africa"
  }],
  "balloon": {
    "fixedPosition": true,
    "maxWidth": 10000
  },
  "chartCursor": {
    "cursorAlpha": 0,
    "oneBalloonOnly": true
  },
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  },
  "export": {
    "enabled": true
  }

});

#chartdiv {
  width: 1000px;
  height: 500px;
}

<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"></div>

属性 在 Amcharts 中设置气球对齐？

Property in Amcharts to set balloon alignment?

amcharts

属性在 Amcharts 中设置气球对齐？