我试图在 chart.js 中显示四个带有图例的水平条;但是对于每种情况,legendtext 都显示未定义。如何在 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);
};
它提供如下输出:
如何更改顶部显示为“未定义”的文本?
最佳答案
试试这个:)
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);
};
对于您必须添加的每个数据集:
label: 'Something'
关于javascript - Chart.js 图例文本显示未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50170521/