我正在尝试在chart.js中展示四个水平条形图,每个图例都位于其上方;但是对于每种情况,图例文本显示为未定义。如何在chart.js中定义或声明图例的文本?
我的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>
我的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);
};
它的输出如下:
如何更改在顶部显示为“未定义”的文本?