gpt4 book ai didi

html - 如何在 Highcharts 中将数据标签设置为垂直

转载 作者:行者123 更新时间:2023-11-28 01:59:48 25 4
gpt4 key购买 nike

我想使用 Highcharts 插件和 XML 文件中的数据创建一个图表“堆叠柱”。 (参见 here)我的 XML 文件是:

<?xml version="1.0" encoding="utf-8"?>
<chart>
<categories>
<item>2000</item>
<item>2001</item>
<item>2002</item>
.... </categories>
<series>
<name>Impots locaux</name>
<data>
<point>231</point>
<point>232</point>
.... </data>
</series>
<series>
<name>Autres impots et taxes</name>
<data>
<point>24</point>
<point>27</point>
<point>37</point>
.....</data>
</series>
<series>
<name>Dotation globale de fonctionnement</name>
<data>
<point>247</point>
<point>254</point>
....</data>
</series>
</chart>

HTML编码是:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mazet</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript" src="../js/themes/gray.js"></script>
<script type="text/javascript">
$(document).ready(function() {


var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Produits de fonctionnement du Mazet-Saint-Voy'
},
subtitle: {
text: 'Source : <a href="http://alize22.finances.gouv.fr/communes/eneuro/RDep.php?type=BPS&dep=043" target="_blank">Ministère de l\'économie et des finances</a>'
},
tooltip: {
formatter: function () {
return '' + this.y + ' €/hab. en ' + this.x;
}
},

plotOptions: {
column: {
/* pointPadding: 0.2,
borderWidth: 0,*/
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
xAxis: {
categories: [],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}

},
yAxis: {
title: {
text: 'En euros par habitant'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
series: []
};

// Load the data from the XML file
$.get('../xml/43130.xml', function(xml) {

// Split the lines
var $xml = $(xml);

// push categories
$xml.find('categories item').each(function(i, category) {
options.xAxis.categories.push($(category).text());
});

// push series
$xml.find('series').each(function(i, series) {
var seriesOptions = {
name: $(series).find('name').text(),
data: []
};

// push data points
$(series).find('data point').each(function(i, point) {
seriesOptions.data.push(
parseInt($(point).text())
);
});

// add it to the options
options.series.push(seriesOptions);
});
var chart = new Highcharts.Chart(options);
});


});
</script>

</head>
<body>

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>


</body>
</html>

我的 3 系列数据的代码“dataLabels”在哪里以及如何垂直?

dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}

谢谢。

最佳答案

您可以将旋转设置为90demo

或者您可以将 useHTML 设置为 true 并使用 css 设置样式。

.highcharts-data-labels span {
width: 7px;
white-space: normal !Important;
}

那么你的 dataLabels 格式化程序应该是:

formatter: function() {
return this.y.toString().split('').join(' ');
}

这样您将通过以下方式获得标签。

9
0
0

demo

关于html - 如何在 Highcharts 中将数据标签设置为垂直,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14587866/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com