Highcharts graphique à colonnes étiquette rotative
Highcharts graphique à colonnes
L'exemple suivant montre la barre de rotation de l'étiquette graphique.
Dans la section précédente, nous savons déjà Highcharts syntaxe de configuration de base. Regardons les autres configurations. Ajouter une propriété de rotation dans dataLabels dans:
configuration
dataLabels: étiquettes de données
Les données sont affichées sur les dataLabels d'étiquettes définies carte.
degré de rotation du texte est déterminée par l'attribut rotation. On peut aussi définir les étiquettes de texte fond, l'espacement, les frontières et ainsi de suite à travers les autres attributs.
dataLabels = {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // 一个小数
y: 10, // 从上到下 10 像素
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
Exemples
Nom du fichier: highcharts_column_rotated.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'column'
};
var title = {
text: '2014 年全球最大人口城市排名'
};
var subtitle = {
text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
};
var xAxis = {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
};
var yAxis ={
min: 0,
title: {
text: 'Population (millions)'
}
};
var tooltip = {
pointFormat: '2008 年人口: <b>{point.y:.1f} 百万</b>'
};
var credits = {
enabled: false
};
var series= [{
name: 'Population',
data: [
['Shanghai', 23.7],
['Lagos', 16.1],
['Instanbul', 14.2],
['Karachi', 14.0],
['Mumbai', 12.5],
['Moscow', 12.1],
['Sao Paulo', 11.8],
['Beijing', 11.7],
['Guangzhou', 11.1],
['Delhi', 11.1],
['Shenzhen', 10.5],
['Seoul', 10.4],
['Jakarta', 10.0],
['Kinshasa', 9.3],
['Tianjin', 9.3],
['Tokyo', 9.0],
['Cairo', 8.9],
['Dhaka', 8.9],
['Mexico City', 8.9],
['Lima', 8.9]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
L'exemple ci-dessus sortie est: