ChartJS 显示图例
Posted
技术标签:
【中文标题】ChartJS 显示图例【英文标题】:ChartJS display legend 【发布时间】:2017-08-03 08:50:36 【问题描述】:我是 ChartJS 的新手,我对图例有一些问题。我有一个简单的条形图,只有 3 个条形,例如:
<div class="x_panel">
<div class="x_title">
<h2>Bar graph</h2>
<ul class="nav navbar-right panel_toolbox" style="padding-left:5%">
<li>
<a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li>
<a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<canvas id="mybarChart"></canvas>
</div>
</div>
我正在尝试在图表下方显示图例,如附图中的
var mybarChart = new Chart(ctx,
type: 'bar',
data:
labels: [],
datasets: [
label: '# of Votes',
backgroundColor: "#000080",
data: [80]
,
label: '# of Votes2',
backgroundColor: "#d3d3d3",
data: [90]
,
label: '# of Votes3',
backgroundColor: "#add8e6",
data: [45]
]
,
options:
legend:
display: true,
labels:
fontColor: "#000080",
,
scales:
yAxes: [
ticks:
beginAtZero: true
]
);
但我显示的图表是空的:( 我还尝试通过在画布下方添加另一个 div 并通过以下方式调用它来显示图例:
document.getElementById('barlegend').innerhtml = mybarChart.generateLegend();
结果相同:(
我做错了什么?
【问题讨论】:
【参考方案1】:使用最新版本的chart.js(3.6.0),可以通过以下代码控制图例显示:
const options =
plugins:
...
legend:
position: "right", // by default it's top
,
...
,
;
我知道这已经在这里很久了,但可能会帮助将来遇到与我相同问题的人。
【讨论】:
【参考方案2】:根据您在问题中提供的代码,您似乎忘记在图表数据对象中添加 labels
数据。如果没有这些信息,chartjs 将无法生成您的轴并将每个数据集数据映射到它。
此外,由于您提到希望图例位于图表下方,因此我添加了 display: bottom
选项。这是工作代码。
var ctx = document.getElementById("mybarChart").getContext("2d");
var mybarChart = new Chart(ctx,
type: 'bar',
data:
labels: ['Votes'],
datasets: [
label: '# of Votes',
backgroundColor: "#000080",
data: [80]
,
label: '# of Votes2',
backgroundColor: "#d3d3d3",
data: [90]
,
label: '# of Votes3',
backgroundColor: "#add8e6",
data: [45]
]
,
options:
legend:
display: true,
position: 'bottom',
labels:
fontColor: "#000080",
,
scales:
yAxes: [
ticks:
beginAtZero: true
]
);
这也是一个有效的codepen example。
【讨论】:
以上是关于ChartJS 显示图例的主要内容,如果未能解决你的问题,请参考以下文章