我尝试在图表上显示值并使用datalabels-plugin。 我有很多具有多个值的不同折线图。其中大多数都有问题。数据标签被隐藏。 如何在顶部Yaxis上添加空间并启动Xaxis来解决此问题?
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["","1989", "2004", "2014", "2017", "2019", ""],
datasets: [{
label: 'Valorisation',
data: ["null",{{{cote_1989_eu}}}, {{{cote_2004}}}, {{{cote_2014}}}, {{{cote_2017}}}, {{{cote_2017}}}, "null"],
backgroundColor: 'white',
borderColor: 'rgb(255, 178, 0)',
borderWidth: 5,
pointHitRadius: 100
}]
},
options: {
tooltips: {
enabled: false
},
plugins: {
datalabels: {
backgroundColor: '#ffa100',
padding: 8,
borderRadius: 6,
clip: true,
color: 'white',
font: {
weight: 'bold'
},
align: 'center',
offset: 10,
formatter: function(value) {
return value.toLocaleString() + ' €';
}
}
},
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
return value.toLocaleString() + ' €';
}
}
}]
}
}
});
编辑:xaxis的问题已解决,并且是Yaxis开头的问题。 Yaxis顶部的问题仍然存在!
答案 0 :(得分:0)
解决此问题的一种方法是在offset
的ticks配置中将true
的{{1}}设置为xAxis
,在max
的ticks配置中设置yAxis
的值。
const data = [100036, 140000, 400000, 900000, 1000000, null];
var options = {
scales: {
xAxes: [
{
offset: true
}
],
yAxes: [
{
ticks: {
max: Math.max(...data) * 1.2
}
}
]
}
};
如果offset
为true
,则多余的空间将添加到两个边缘,并且轴将缩放
以适合图表区域。
与max
一样,对其进行设置将覆盖刻度的最大数字,该数字默认情况下是从数据集的最大值中得出的。
var ctx = document.getElementById("myChart").getContext("2d");
const data = [100036, 140000, 400000, 900000, 1000000, null];
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["1989", "2004", "2014", "2017", "2019", ""],
datasets: [
{
label: "Valorisation",
data: data,
backgroundColor: "white",
borderColor: "rgb(255, 178, 0)",
borderWidth: 5,
pointHitRadius: 100
}
]
},
options: {
tooltips: {
enabled: false
},
plugins: {
datalabels: {
backgroundColor: "#ffa100",
padding: 8,
borderRadius: 6,
clip: true,
color: "white",
font: {
weight: "bold"
},
align: "center",
offset: 10,
formatter: function(value) {
return value.toLocaleString() + " €";
}
}
},
legend: {
display: false
},
scales: {
xAxes: [
{
offset: true,
gridLines: {
display: false
}
}
],
yAxes: [
{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
min: 0,
max: Math.max(...data) * 1.2,
callback: function(value, inde0x, values) {
return value.toLocaleString() + " €";
}
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.5.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="myChart" width="300" height="100"></canvas>