Amchart:条形图内的长标签不显示

时间:2017-12-21 12:30:49

标签: javascript amcharts

我试图在AmChart图表的条形图中添加标签。如果标签很长则不显示。请看看JsFiddle,https://jsfiddle.net/o3518u19/4/

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "categoryField": "year",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start",
    "position": "left"
  },
  "columnSpacing": 0,
  "columnWidth": 0.6,
  "graphs": [ {
    "balloonText": "Income:[[value]]",
    "labelText": "HEJ",
    "labelPosition": "inside",
    "labelRotation": 270,
    "color": "#fff",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "title": "Income",
    "type": "column",
    "valueField": "income",
    "fixedColumnWidth": 25
  },
  {
    "balloonText": "Income:[[value]]",
    "labelRotation": 270,
    "labelText": "HEJA",
    "labelPosition": "inside",
    "color": "#fff",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "title": "Income",
    "type": "column",
    "valueField": "income",
    "fixedColumnWidth": 25
  }],
  "valueAxes": [ {
    "stackType": "regular",
    "position": "top",
    "axisAlpha": 0
  } ],
  "dataProvider": [ {
    "year": 2005,
    "income": 23.5,
    "expenses": 18.1
  }, {
    "year": 2006,
    "income": 26.2,
    "expenses": 22.8
  }]
} );

其中" HEJ"显示但不是" HEJA"。我不想让列宽于25。

1 个答案:

答案 0 :(得分:1)

使用"showAllValueLabels":true,这将显示更长的标签,并覆盖检查是否合适。

{
    "balloonText": "Income:[[value]]",
    "labelRotation": 270,
    "labelText": "HEJA",
    "showAllValueLabels":true,   /// add this line
    "labelPosition": "inside",
    "color": "#fff",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "title": "Income",
    "type": "column",
    "valueField": "income",
    "fixedColumnWidth": 25
}

另外,您可以使用"labelOffset"进一步调整标签的位置(在您的情况下为verticaly)