上午圖表標籤被砍掉

我正在製作一個系列表，並且在標籤上遇到困難。如果你看我的筆在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");

來源

2016-09-06 Drew Adams

然而，有一個在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設置爲true here後，您可以找到可用的類名列表。

如果您不習慣手動修改SVG，則可以將它們顯示爲類別軸標籤。

Codepen demo - using category axis labels

來源

2016-09-07 19:45:40 xorspark

上午圖表標籤被砍掉

回答

相關問題