该问题通常是由于在柱状图数据源中缺少名称或标签属性引起的,而导致图例无法正确显示。
以下是一个示例,说明如何动态生成柱状图,并指定每个数据点的标签属性:
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "Sales",
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
在上面的示例中,我们在 datasets
对象的每个数据点中添加了一个 label
属性,并将其指定为每个数据点的名称。这将确保图例正确显示。
如果您正在使用 Chart.js 2.0+ 版本,则可以使用以下代码碎片来设置图例:
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
legend: {
display: true,
labels: {
fontColor: 'rgb(0, 0, 0)'
}
}
}
});
上面的示例将在图表下方显示一个黑色文本标签,显示每种颜色的含义。
通过指定数据点的名称或标签属性,您可以确保正确的图例显示。此外,通过在选项中设置“图例显示”为真,并在标签对象中指定字体颜色等设置,可以对图例进行进一步