J'essaie de montrer quatre barres horizontales avec des légendes au-dessus dans chart.js; mais le texte de légende montre indéfini pour chaque cas. Comment définir ou déclarer les textes des légendes dans chart.js?
Mon code html:
<div class="chart bar-chart dark">
<h3 class="title">Name</h3>
<p class="tagline">chocolates</p>
<canvas height="400" id="barChartHDark"></canvas>
</div>
<div class="chart radar-chart light">
<h3 class="title">Bauxite</h3>
<p class="tagline">P&B Dispatch</p>
<canvas height="400" id="radarChartLight"></canvas>
</div>
Mon code javascript:
Charts.prototype.initBarHorizontal = function () {
var ctxD = $("#barChartHDark"), chartData = {
type: 'horizontalBar',
data: {
labels: ["Today", "Last week", "Last month", "Last Year"],
datasets: [{
data: [7, 59, 68, 26],
backgroundColor: this.colors[0],
hoverBackgroundColor: this.convertHex(this.colors[0], 70),
},
{
data: [, 23, 44, 30],
backgroundColor: this.colors[1],
hoverBackgroundColor: this.convertHex(this.colors[1], 70),
},
{
data: [, 3, -7, 1],
backgroundColor: this.colors[2],
hoverBackgroundColor: this.convertHex(this.colors[2], 70),
}]
},
options: {
barThickness: 1,
scales: {
xAxes: [{
stacked: true,
ticks: {
fontColor: this.tickColor
},
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
stacked: true,
ticks: {
fontColor: this.tickColor,
min: 0,
max: 175,
stepSize: 25
}
}]
},
labels: ['Current data','Vs last week/month/year','Change'],
name: ['Current data','Vs last week/month/year','Change'],
legend: {
display: true,
legendText : ['Current','Vs last week/month/year','% Change']
},
}
}, myDarkRadarChart = new Chart(ctxD, chartData), myLightRadarChart = new Chart(ctxL, chartData);
};
Il donne une sortie comme:
Comment changer les textes affichés comme "non définis" en haut?
Essaye celui-là :)
Charts.prototype.initBarHorizontal = function () {
var ctxD = $("#barChartHDark"), chartData = {
type: 'horizontalBar',
data: {
labels: ["Today", "Last week", "Last month", "Last Year"],
datasets: [{
label: 'Something1',
data: [7, 59, 68, 26],
backgroundColor: this.colors[0],
hoverBackgroundColor: this.convertHex(this.colors[0], 70),
},
{
label: 'Something2',
data: [, 23, 44, 30],
backgroundColor: this.colors[1],
hoverBackgroundColor: this.convertHex(this.colors[1], 70),
},
{
label: 'Something3',
data: [, 3, -7, 1],
backgroundColor: this.colors[2],
hoverBackgroundColor: this.convertHex(this.colors[2], 70),
}]
},
options: {
barThickness: 1,
scales: {
xAxes: [{
stacked: true,
ticks: {
fontColor: this.tickColor
},
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
stacked: true,
ticks: {
fontColor: this.tickColor,
min: 0,
max: 175,
stepSize: 25
}
}]
},
labels: ['Current data','Vs last week/month/year','Change'],
name: ['Current data','Vs last week/month/year','Change'],
legend: {
display: true,
legendText : ['Current','Vs last week/month/year','% Change']
},
}
}, myDarkRadarChart = new Chart(ctxD, chartData), myLightRadarChart = new Chart(ctxL, chartData);
};
pour chaque jeu de données, vous devez ajouter:
label: 'Something'
Vous pouvez essayer de définir les étiquettes à partir de celles définies dans la documentation. https://www.chartjs.org/docs/latest/configuration/legend.html#configuration-options . Je crois que ce sont des étiquettes (en tant que tableau d'éléments d'étiquette de légende) et avec
{text" "something"}
comme modèle (voir https://www.chartjs.org/docs/latest/configuration/legend.html#legend-item-interface ).