我的图表标签被砍掉了

Question

我正在制作 am 系列图表，但在使用标签时遇到了困难。如果您在 http://codepen.io/drewtadams/pen/QKLYro 处查看我的笔，图表中最后一列的文本被截断了 - 我想将文本移到该列上方，但我似乎不知道该怎么做。如果这是重复的，我非常感谢 link 的解决方案。

HTML:

<script src="http://www.wgu.edu/sites/all/themes/bricktheme/javascripts/amcharts/amcharts.js"></script>
<script src="http://www.wgu.edu/sites/all/themes/bricktheme/javascripts/amcharts/serial.js"></script>
<script src="amcharts/plugins/dataloader/dataloader.min.js" type="text/javascript"></script>
<script src="amcharts/plugins/responsive/responsive.min.js" type="text/javascript"></script>

<div id="chartdiv" class="bar-chart"></div>

CSS:

#chartdiv{
  height: 300px;
  width: 350px;
}

JS:

// info to be graphed
var chartData = [ {
    timeToGraduate: "1<br>Year",
    percent: 38,
    color: "#ffffff"
  }, {
    color: "#ffffff",
    percent: 29,
    timeToGraduate: "1.5<br>Years"
  }, {
    color: "#ffffff",
    percent: 19,
    timeToGraduate: "2<br>Years"
  }, {
    color: "#ffffff",
    percent: 9,
    timeToGraduate: "2.5<br>Years"
  }, {
    color: "#ffffff",
    percent: 3,
    timeToGraduate: "3<br>Years"
} ];


// chart properties
var chart = new AmCharts.AmSerialChart();
//chart.angle = 30;
chart.autoMargins = true;
chart.categoryAxis.labelsEnabled = false;
chart.categoryAxis.title = "Time to Graduate";
chart.categoryAxis.titleColor = "#406591";   
chart.categoryField = "timeToGraduate";
//chart.columnSpacing3D = 10;
chart.dataProvider = chartData;
//chart.depth3D = 25;
chart.handDrawn = false;
chart.type = "serial";


// graph properties
var graph = new AmCharts.AmGraph();
graph.balloonText = "[[value]]%";
graph.fillAlphas = 1;
graph.labelColorField = "color";
graph.labelPosition = "bottom";
graph.labelText = "[[category]]";
graph.lineColor = "#406591";
graph.type = "column";
graph.urlField = "url";
graph.valueField = "percent";
chart.addGraph(graph);


// valueAxis properties
var valueAxis = new AmCharts.ValueAxis();
valueAxis.labelFrequency = 1;
valueAxis.minimum = 0;
valueAxis.title = "Percent of Grads";
valueAxis.titleColor = "#406591";
valueAxis.unit = "%";
chart.addValueAxis(valueAxis); // add valueAxis properties to chart


// draw out the graph
chart.write("chartdiv");

Answer 1

图表对象中有一个labelOffset property in AmGraph that allows you to shift graph labels by a pixel amount, however it will affect all labels, which may or may not be ideal. If you want to modify just that particular label, then you can modify the SVG directly through the drawn event and set addClassNames为真，所以你可以直接查询SVG元素：

chart.addClassNames = true;
chart.addListener("drawn", function(e) {
  var targetLabel = document.querySelectorAll('.amcharts-graph-label')[4]; // the last label contains the 3 Years string
  targetLabel.setAttribute("transform", "translate(226,204)"); //adjust the second value in translate to adjust the y position
});

Codepen demo - modifying SVG

将 addClassNames 设置为 true here 后，您可以找到可用的 class 个名称列表。

如果您不习惯手动修改 SVG，则可以将它们显示为分类轴标签。

Codepen demo - using category axis labels

我的图表标签被砍掉了

am chart labels are being chopped off

amcharts