[英]How to show bar labels in legend in Chart.js 2.1.6?
I'm creating charts using Chart.js and I want to show the labels for the bars in the legend, not the title of the dataset (there is only one), please see the below image as an example:我正在使用 Chart.js 创建图表,我想在图例中显示条形的标签,而不是数据集的标题(只有一个),请参见下图作为示例:
My current legend just looks like this:我现在的传说是这样的:
I have looked through the docs but to no avail, I found them very confusing actually.我浏览了文档但无济于事,我发现它们实际上非常混乱。
Here is my current code:这是我当前的代码:
var chart_0 = new Chart($('#cp_chart_0'), {
type: 'bar'
, data: {
labels: ['Blue','Green','Yellow','Red','Purple','Orange']
, datasets: [{
label: 'Dataset 1'
, borderWidth: 0
, backgroundColor: ['#2C79C5','#7FA830','#7B57C3','#ED4D40','#EC802F','#1DC6D3']
, data: ['12','2','5','0','9','1']
}]
}
});
Thanks!谢谢!
In one of the most recent releases of Chart.js 2.1.x, they added back this functionality.在 Chart.js 2.1.x 的最新版本之一中,他们重新添加了此功能。 So go get the latest release first.
所以先去获取最新版本。 Then insert the code below.
然后插入下面的代码。
It is located under the options and legend.它位于选项和图例下方。 Here is how you use it:
以下是你如何使用它:
options: {
legend: {
position: 'right'
}
}
Easiest way is to provide your data with multiple sets :最简单的方法是为您的数据提供多个集合:
data: {
labels: ['total votes']
, datasets: [{
label: 'Blue'
, backgroundColor: ['#2C79C5']
, data: ['12']
},{
label: 'Green'
, backgroundColor: ['#7FA830']
, data: ['2']
},
...
]
}
But you can generate a custom labels using generateLabels
- http://www.chartjs.org/docs/#chart-configuration-legend-configuration但是您可以使用
generateLabels
- http://www.chartjs.org/docs/#chart-configuration-legend-configuration生成自定义标签
Or even customise the whole legend, including formatting, with legendCallback
- http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration甚至可以自定义整个图例,包括格式,使用
legendCallback
- http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration
This solution uses Chart.js version 3 .此解决方案使用Chart.js 版本 3 。 You can pre-process your data using the Plugin Core API .
您可以使用插件核心 API预处理您的数据。 The API offers different hooks that may be used for executing custom code.
API 提供了不同的钩子,可用于执行自定义代码。
I use the beforeInit
hook to create individual datasets for each defined label/value pair.我使用
beforeInit
钩子为每个定义的标签/值对创建单独的数据集。 Note that the data
of these new datasets are defined in point format (for instance [{ x: 1, y: 12 }]
):请注意,这些新
data
集的数据以点格式定义(例如[{ x: 1, y: 12 }]
):
beforeInit: chart => {
let dataset = chart.config.data.datasets[0];
chart.config.data.datasets = chart.config.data.labels.map((l, i) => ({
label: l,
data: [{ x: i + 1, y: dataset.data[i] }],
backgroundColor: dataset.backgroundColor[i],
categoryPercentage: 1
}));
chart.config.data.labels = undefined;
}
Further you need to define a second x-axis that will contain the labels.此外,您需要定义将包含标签的第二个 x 轴。
x1: {
offset: true,
gridLines: {
display: false
}
}
The labels
on x1
need to be collected and defined programmatically each time the hidden
state of a dataset
changes.每次
dataset
的hidden
状态发生变化时,都需要以编程方式收集和定义x1
上的labels
。 This can be done in the beforeLayout
hook.这可以在
beforeLayout
挂钩中完成。
beforeLayout: chart => chart.options.scales.x1.labels = chart.config.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label)
Please take a look at below runnable code and see how it works.请看下面的可运行代码,看看它是如何工作的。
new Chart('chart', { type: 'bar', plugins: [{ beforeInit: chart => { let dataset = chart.config.data.datasets[0]; chart.config.data.datasets = chart.config.data.labels.map((l, i) => ({ label: l, data: [{ x: i + 1, y: dataset.data[i] }], backgroundColor: dataset.backgroundColor[i], categoryPercentage: 1 })); chart.config.data.labels = undefined; }, beforeLayout: chart => chart.options.scales.x1.labels = chart.config.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label) }], data: { labels: ['Blue', 'Green', 'Yellow', 'Red', 'Purple', 'Orange'], datasets: [{ data: ['12', '2', '5', '0', '9', '1'], backgroundColor: ['#2C79C5', '#7FA830', '#FFF200', '#ED4D40', '#800080', '#EC802F'] }] }, options: { interaction: { intersect: true, mode: 'nearest' }, plugins: { legend: { position: 'right' }, tooltip: { callbacks: { title: () => undefined } } }, scales: { y: { beginAtZero: true }, x: { display: false }, x1: { offset: true, gridLines: { display: false } } } } });
canvas { max-width: 400px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script> <canvas id="chart" height="120"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.