gpt4 book ai didi

javascript - ChartJS 版本 3 - 多折线图的通用图例

转载 作者:行者123 更新时间:2023-12-02 02:04:12 32 4
gpt4 key购买 nike

我想要多个图表有一个共同的图例,我看到了这篇文章 Chart.js Multiple charts with one common legend它可能适用于低于 3 的 ChartJS 版本,但是我没有尝试它,因为我使用的是 ChartJS 版本 3。

给定的解决方案不适用于 ChartJS 版本 > 3,因为版本 3 中弃用了一些 API 函数 - Chart.prototype.generateLegend

有人可以帮助如何使用 ChartJS 版本 3(最新版本)实现此目的。这是我正在寻找的非常重要的功能之一。

最佳答案

您可以使用自定义插件来生成图例并将点击处理程序绑定(bind)到所有图表,在我当前的实现中,您必须将所有图表放在一个数组中才能正常工作:

const getOrCreateLegendList = (chart, id) => {
const legendContainer = document.getElementById(id);
let listContainer = legendContainer.querySelector('ul');

if (!listContainer) {
listContainer = document.createElement('ul');
listContainer.style.display = 'flex';
listContainer.style.flexDirection = 'row';
listContainer.style.margin = 0;
listContainer.style.padding = 0;

legendContainer.appendChild(listContainer);
}

return listContainer;
};

const htmlLegendPlugin = {
id: 'htmlLegend',
afterUpdate(chart, args, options) {
const ul = getOrCreateLegendList(chart, options.containerID);

// Remove old legend items
while (ul.firstChild) {
ul.firstChild.remove();
}

// Reuse the built-in legendItems generator
const items = chart.options.plugins.legend.labels.generateLabels(chart);

items.forEach(item => {
const li = document.createElement('li');
li.style.alignItems = 'center';
li.style.cursor = 'pointer';
li.style.display = 'flex';
li.style.flexDirection = 'row';
li.style.marginLeft = '10px';

li.onclick = () => {
const {
type
} = chart.config;
if (type === 'pie' || type === 'doughnut') {
// Pie and doughnut charts only have a single dataset and visibility is per item
charts.forEach((chartItem) => {
chartItem.toggleDataVisibility(item.index);
chartItem.update();
})
} else {
charts.forEach((chartItem) => {
chartItem.setDatasetVisibility(item.datasetIndex, !chartItem.isDatasetVisible(item.datasetIndex));
chartItem.update();
})
}
};

// Color box
const boxSpan = document.createElement('span');
boxSpan.style.background = item.fillStyle;
boxSpan.style.borderColor = item.strokeStyle;
boxSpan.style.borderWidth = item.lineWidth + 'px';
boxSpan.style.display = 'inline-block';
boxSpan.style.height = '20px';
boxSpan.style.marginRight = '10px';
boxSpan.style.width = '20px';

// Text
const textContainer = document.createElement('p');
textContainer.style.color = item.fontColor;
textContainer.style.margin = 0;
textContainer.style.padding = 0;
textContainer.style.textDecoration = item.hidden ? 'line-through' : '';

const text = document.createTextNode(item.text);
textContainer.appendChild(text);

li.appendChild(boxSpan);
li.appendChild(textContainer);
ul.appendChild(li);
});
}
};

const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink',
backgroundColor: 'pink',
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'yellow',
backgroundColor: 'yellow',
}
]
},
options: {
plugins: {
legend: {
display: false,
},
htmlLegend: {
// ID of the container to put the legend in
containerID: 'chartLegend',
}
}
},
plugins: [htmlLegendPlugin]
}

const options2 = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [4, 9, 13, 15, 12, 6],
borderColor: 'pink',
backgroundColor: 'pink',
},
{
label: '# of Points',
data: [17, 1, 15, 18, 9, 3],
borderColor: 'yellow',
backgroundColor: 'yellow',
}
]
},
options: {
plugins: {
legend: {
display: false
}
}
}
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const ctx2 = document.getElementById('chartJSContainer2').getContext('2d');

const chart = new Chart(ctx, options);
const chart2 = new Chart(ctx2, options2);

const charts = [chart, chart2];
<body>
<div id="chartLegend">

</div>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<canvas id="chartJSContainer2" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

关于javascript - ChartJS 版本 3 - 多折线图的通用图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68666038/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com