Question

我正在制作一张连续图表，并且很难与标签合作。如果你在http://codepen.io/drewtadams/pen/QKLYro查看我的笔，最后一列的文字正在图表中被删除 - 我想将文字移到列的上方，但我似乎无法想象如何做到这一点。如果这是重复的，我非常感谢您找到解决方案的链接。

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

AmGraph中有一个labelOffset属性允许您将图形标签移动像素数量，但它会影响所有标签，这可能是理想的，也可能是不理想的。如果您只想修改该特定标签，则可以直接通过drawn事件修改SVG，并在图表对象中将addClassNames设置为true，这样您就可以直接查询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设为真here后，您可以找到可用的班级名称列表。

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

Codepen demo - using category axis labels

我的图表标签正在被砍掉

1 个答案: