如何在chart.js 中添加额外的图例项？

Question

我有一个带有单个数据集的图表。 这是一个条形图。 我想要一些条形黄色和一些红色。 我可以使用数据集上的函数来做到这一点。 问题是图例仅显示整个数据集的一项。 它出现黄色。 我需要在图例中为红色项目添加另一个项目。

我尝试添加第二个数据集，但随后显示为两个相邻的条。 我还没有尝试过堆叠条形图。

如何向图例添加另一个元素？

 var data = [ { Name: 'John' , FeesPaid: 100 , MemberType: 'NonMember' }, { Name: 'Mary' , FeesPaid: 87 , MemberType: 'Member' }, { Name: 'Charles' , FeesPaid: 108 , MemberType: 'Member' }, { Name: 'Fern' , FeesPaid: 91 , MemberType: 'Member' }, { Name: 'Robert' , FeesPaid: 100 , MemberType: 'NonMember' }, { Name: 'Andrea' , FeesPaid: 114 , MemberType: 'Member' }, ] var labels = data.map((item, idx) => { return item.Name; }); var values = data.map((item, idx) => { return item.FeesPaid; }); var getColor = function(record) { var r = data[record.dataIndex]; if (r.MemberType == "NonMember") { return '#f5be0b'; } else { return 'rgb(255, 99, 132)'; } } var ctx = document.getElementById('canvas').getContext('2d'); var chart = new Chart(ctx, { type: 'bar', data: { labels: labels, datasets: [{ label: 'Non-Member', backgroundColor: getColor, borderColor: getColor, data: values }] } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="canvas"></canvas>

这是 codepen 上的一面镜子： https ://codepen.io/dagostinelli/pen/BaKWpJR

Answer 1

这是一个使用legendCallback的幼稚方法。

如果您想要多个图例项，开箱即用，您将需要多个数据集。 通常，每个数据集都有自己的标签。

 const ctx = document.getElementById('canvas').getContext('2d'); const data = [ { Name: 'John' , FeesPaid: 100 , MemberType: 'NonMember' }, { Name: 'Mary' , FeesPaid: 87 , MemberType: 'Member' }, { Name: 'Charles' , FeesPaid: 108 , MemberType: 'Member' }, { Name: 'Fern' , FeesPaid: 91 , MemberType: 'Member' }, { Name: 'Robert' , FeesPaid: 100 , MemberType: 'NonMember' }, { Name: 'Andrea' , FeesPaid: 114 , MemberType: 'Member' }, ] const fields = [ { label: 'Member' , color: 'rgb(255, 99, 132)' , active: true }, { label: 'NonMember' , color: '#f5be0b' , active: true } ]; const Colors = fields.reduce((obj, field) => ({ ...obj, [field.label]: field.color }), {}); const labels = data.map(item => item.Name); const values = data.map(item => item.FeesPaid); const getColor = record => { const r = data.find(d => d.Name === record.chart.data.labels[record.dataIndex]); return r ? Colors[r.MemberType] : Colors.NonMember; }; const customLegendRenderer = (chart) => { return ` <ul class="custom-legend ${chart.id}-legend"> ${fields.map(field => ` <li data-field="${field.label}" data-active="${field.active}"> <span style="background-color:${field.color}"></span> ${field.label} </li> `).join('')} </ul> `; }; const chart = new Chart(ctx, { type: 'bar', data: { labels: labels, datasets: [{ backgroundColor: getColor, borderColor: getColor, data: values }] }, options: { legend: false, legendCallback: customLegendRenderer } }); const handleClick = (e) => { const labels = chart.data.labels; const dataset = chart.data.datasets[0]; const item = e.target.closest('li'); if (item === null) return; const selected = fields.find(field => field.label === item.dataset.field); selected.active = !selected.active; const activeFields = fields.filter(field => field.active).map(field => field.label); while (dataset.data.length && labels.length) { dataset.data.pop(); labels.pop(); } const filteredData = data.filter(record => activeFields.includes(record.MemberType)); filteredData.forEach(item => { dataset.data.push(item.FeesPaid); labels.push(item.Name); }); chart.update(); customLegend.innerHTML = chart.generateLegend(); }; const customLegend = document.querySelector('#chartjs-legend'); customLegend.innerHTML = chart.generateLegend(); customLegend.addEventListener('click', handleClick);

 .custom-legend { display: flex; flex-direction: row; justify-content: space-evenly; list-style-type: none; } .custom-legend li[data-active="false"] { color: #777; text-decoration: line-through; } .custom-legend li span { display: inline-block; width: 1em; height: 1em; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="canvas"></canvas> <div id="chartjs-legend" class="noselect"></div>