am Diagramm Etiketten werden gehackt

Question

Ich arbeite an einer am seriellen Tabelle und habe eine schwierige Zeit mit den Etiketten. Wenn Sie meinen Stift unter http://codepen.io/drewtadams/pen/QKLYro betrachten, wird der Text der letzten Spalte in der Grafik abgeschnitten - ich möchte den Text über der Spalte verschieben, aber ich kann nicht herausfinden, wie es geht. Wenn dies ein Duplikat ist, würde ich definitiv einen Link zu einer Lösung schätzen.

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

Es gibt eine labelOffset Eigenschaft in AmGraph, die Sie Graph Etiketten durch eine Pixelmenge zu verschieben erlaubt, jedoch Es betrifft alle Etiketten, die ideal sein können oder nicht. Wenn Sie nur mit diesem Etikett ändern möchten, dann können Sie die SVG direkt über das drawn Ereignis ändern und setzen addClassNames im Diagrammobjekt auf true, damit Sie das SVG-Element direkt abfragen kann:

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

Sie können eine Liste der Klassennamen finden, die nach dem Setzen von addClassNames auf True here verfügbar sind.

Wenn Sie mit der manuellen Änderung des SVG nicht vertraut sind, können Sie sie stattdessen als Kategorieachsenbeschriftungen anzeigen.

Codepen demo - using category axis labels