在悬停时自定义 ChartJS 甜甜圈边框
问题描述 投票：0回答：1
我的设计师使用 Figma 创建了以下原型。
我的堆栈是：
- Vuejs
- 引导程序
- 图表JS
所以我的问题是我们可以在点击时在某些部分添加此自定义边框吗？
目标： 添加不同颜色的“自定义边框”并仅启用 Top 边框
我做了我的研究，但仍然没有达到确切的期望：
- 添加第二层图表（X），它创建完整的图表而不是数据的大小
- 在悬停时添加边框，但问题是我找不到一种方法来设置仅“顶部”边框处于活动状态。
预期结果
我的关闭结果codepen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Doughnut Chart with Clickable Legend</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
/* Limit the size of the chart */
#chart-container {
width: 500px;
height: 500px;
margin: auto; /* Center the chart horizontally */
}
canvas {
display: block;
}
</style>
</head>
<body>
<div id="chart-container">
<canvas id="myDoughnutChart"></canvas>
</div>
<script>
const ctx = document.getElementById('myDoughnutChart').getContext('2d');
const myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Green', 'Yellow', 'Orange', 'Purple', 'Blue', 'Pink'],
datasets: [{
data: [25, 25, 25, 25, 25, 30],
backgroundColor: [
'rgb(71,159,182)',
'rgb(248,210,103)',
'rgb(238,129,48)',
'rgb(66,44,142)',
'rgb(41,99,246)',
'rgb(221,84,112)'
],
borderColor: [
'rgb(71,159,182)',
'rgb(248,210,103)',
'rgb(238,129,48)',
'rgb(66,44,142)',
'rgb(41,99,246)',
'rgb(221,84,112)'
],
borderWidth: Array(6).fill(5),
borderAlign: 'outer'
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'right',
onClick: function(e, legendItem, legend) {
const dataset = legend.chart.data.datasets[0];
const index = legendItem.index;
// Reset all borders to 5px
dataset.borderWidth = dataset.borderWidth.map(() => 5);
// dataset.borderColor = dataset.borderColor.map(() => '');
// Set the border width of the selected segment to 10px
dataset.borderWidth[index] = 20;
// dataset.borderAlign[index] = 'outer';
// Update the chart to apply the changes
legend.chart.update();
}
}
}
}
});
</script>
</body>
</html>
1个回答
0
投票
投票
可以使用自定义插件绘制自定义边框。这 hook 用于绘图 绘制其他元素后在画布上是
afterDraw我假设，根据您的代码，您希望通过单击图例来激活自定义边框；在下面的代码片段中，后续单击将禁用边框。
new Chart('myDoughnutChart', {
type: 'doughnut',
data: {
labels: ['Green', 'Yellow', 'Orange', 'Purple', 'Blue', 'Pink'],
datasets: [{
data: [25, 25, 25, 25, 25, 30],
backgroundColor: [
'rgb(71,159,182)',
'rgb(248,210,103)',
'rgb(238,129,48)',
'rgb(66,44,142)',
'rgb(41,99,246)',
'rgb(221,84,112)'
],
borderColor: [
'rgb(71,159,182)',
'rgb(248,210,103)',
'rgb(238,129,48)',
'rgb(66,44,142)',
'rgb(41,99,246)',
'rgb(221,84,112)'
],
borderWidth: 0,
hoverBorderWidth: 0,
borderAlign: 'outer'
}]
},
options: {
responsive: true,
radius: "95%", // use to create space between the doughnut and the legend
plugins: {
// "custom-border": {
// color: '#8fa', // default '#48f', in plugin code, indexable
// size: 20 // default 10, in plugin code, indexable
// },
legend: {
position: 'right',
onClick: function({chart}, {index}) {
chart.options.plugins["custom-border"].on[index] = !chart.options.plugins["custom-border"].on[index];
chart.update('none');
}
}
}
},
plugins:[
{
id: "custom-border",
beforeInit(chart){
if(!chart.options.plugins['custom-border']){
chart.options.plugins['custom-border'] = {};
}
if(!chart.options.plugins['custom-border'].on || chart.options.plugins['custom-border'].on.length === 0){
chart.options.plugins['custom-border'].on = Array(chart.data.datasets[0].data.length).fill(false);
}
},
afterDraw(chart, _, options){
if(!options.on || !options.on.includes(true)){
return;
}
const meta = chart.getDatasetMeta(0);
for(let i = 0; i < options.on.length; i++){
if(options.on[i]){
const {x, y, startAngle, endAngle, outerRadius: r} = meta.data[i];
const {ctx} = chart;
ctx.save();
const colorOption = chart.options.plugins['custom-border'].color;
const color = Array.isArray(colorOption) ? colorOption[i] : colorOption;
ctx.fillStyle = color || '#48f';
const sizeOption = chart.options.plugins['custom-border'].size;
const size = Array.isArray(sizeOption) ? sizeOption[i] : sizeOption;
const dr = size ?? 10;
ctx.beginPath();
ctx.arc(x, y, r - 1, startAngle, endAngle);
ctx.lineTo(x + (r + dr) * Math.cos(endAngle), y + (r + dr) * Math.sin(endAngle));
ctx.arc(x, y, r + dr, endAngle, startAngle, true);
ctx.closePath();
ctx.fill();
ctx.restore();
}
}
}
}
]
});#chart-container {
width: 500px;
height: 500px;
margin: auto; /* Center the chart horizontally */
}
canvas {
display: block;
}<div id="chart-container">
<canvas id="myDoughnutChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>下一个片段添加了一些附加功能，上面的最小解决方案未涵盖。不过，它可能对某些人来说很有趣，因为它包含显示如何使用插件
defaultsradiusnew Chart('myDoughnutChart', {
type: 'doughnut',
data: {
labels: ['Green', 'Yellow', 'Orange', 'Purple', 'Blue', 'Pink'],
datasets: [{
data: [25, 25, 25, 25, 25, 30],
backgroundColor: [
'rgb(71,159,182)',
'rgb(248,210,103)',
'rgb(238,129,48)',
'rgb(66,44,142)',
'rgb(41,99,246)',
'rgb(221,84,112)'
],
borderColor: [
'rgb(71,159,182)',
'rgb(248,210,103)',
'rgb(238,129,48)',
'rgb(66,44,142)',
'rgb(41,99,246)',
'rgb(221,84,112)'
],
borderWidth: 0,
hoverBorderWidth: 0,
borderAlign: 'outer'
}]
},
options: {
responsive: true,
radius: function({chart}){
// used to create space between the doughnut and the legend
// might also be set manually
const pluginCustomBorder = chart.registry.plugins.get("custom-border") ??
chart.config.plugins.find(({id})=>id==='custom-border');
let customBorderSize = chart.options.plugins["custom-border"].size ??
pluginCustomBorder.defaults.size;
if(Array.isArray(customBorderSize)){
customBorderSize = Math.max(...customBorderSize);
}
customBorderSize += 5;
const radiusFrac = 1-customBorderSize/chart.chartArea.width;
return `${Math.floor(radiusFrac*100)}%`;
},
plugins: {
// "custom-border": {
// color: ['#8fa', '#f8a', '#a8f', '#8fa', '#f8a', '#a8f'], // default '#48f', in plugin code, indexable
// size: 15 // default 10, in plugin code, indexable
// },
legend: {
position: 'right',
labels:{
usePointStyle: true,
pointStyleWidth: 40,
pointStyleHeight: 12,
generateLabels: function(chart){
const labelPlugin = this;
if(!labelPlugin.$cachedImages){
labelPlugin.$cachedImages = Array(chart.data.datasets[0].data.length).fill(null);
}
const ret = Array.from({length: chart.data.datasets[0].data.length}, (_, index) => {
let pointStyle = 'rect';
if(chart.options.plugins["custom-border"].on[index]){
if(labelPlugin.$cachedImages[index]){
pointStyle = labelPlugin.$cachedImages[index];
}
else{
const canvasImg = document.createElement('canvas');
const width = chart.legend.options.labels.pointStyleWidth ?? 40,
height = chart.legend.options.labels.pointStyleHeight ?? 12;
canvasImg.width = width;
canvasImg.height = height;
const ctx = canvasImg.getContext('2d');
ctx.fillStyle = chart.data.datasets[0].backgroundColor[index];
ctx.fillRect(0, Math.round(height/4) + 1, width, height);
const colorOption = chart.options.plugins['custom-border'].color;
const color = Array.isArray(colorOption) ? colorOption[index] : colorOption;
ctx.fillStyle = color || '#48f';
ctx.fillRect(0, 0, width, Math.round(height/4));
const image = new Image(width, height);
image.onload = function(){
chart.update('none');
}
image.src = canvasImg.toDataURL("image/png").replace("image/png", "image/octet-stream");
labelPlugin.$cachedImages[index] = image;
pointStyle = image;
}
}
return {
text: chart.data.labels[index],
fillStyle: chart.data.datasets[0].backgroundColor[index],
strokeStyle: chart.data.datasets[0].backgroundColor[index],
index,
pointStyle
}
});
return ret;
}
},
onClick: function({chart}, {index}) {
chart.options.plugins["custom-border"].on[index] = !chart.options.plugins["custom-border"].on[index];
chart.update('none');
}
}
}
},
plugins:[
{
id: "custom-border",
defaults: {
color: '#48f',
size: 10
},
beforeInit(chart){
if(!chart.options.plugins['custom-border']){
chart.options.plugins['custom-border'] = {};
}
if(!chart.options.plugins['custom-border'].on || chart.options.plugins['custom-border'].on.length === 0){
chart.options.plugins['custom-border'].on = Array(chart.data.datasets[0].data.length).fill(false);
}
},
afterDraw(chart, _, options){
if(!options.on || !options.on.includes(true)){
return;
}
const meta = chart.getDatasetMeta(0);
for(let i = 0; i < options.on.length; i++){
if(options.on[i]){
const {x, y, startAngle, endAngle, outerRadius: r} = meta.data[i];
const {ctx} = chart;
ctx.save();
const colorOption = chart.options.plugins['custom-border'].color;
const color = Array.isArray(colorOption) ? colorOption[i] : colorOption;
ctx.fillStyle = color || this.defaults.color;
const sizeOption = chart.options.plugins['custom-border'].size;
const size = Array.isArray(sizeOption) ? sizeOption[i] : sizeOption;
const dr = size ?? this.defaults.size;
ctx.beginPath();
ctx.arc(x, y, r - 1, startAngle, endAngle);
ctx.lineTo(x + (r + dr) * Math.cos(endAngle), y + (r + dr) * Math.sin(endAngle));
ctx.arc(x, y, r + dr, endAngle, startAngle, true);
ctx.closePath();
ctx.fill();
ctx.restore();
}
}
}
}
]
});#chart-container {
width: 500px;
height: 500px;
margin: auto; /* Center the chart horizontally */
}
canvas {
display: block;
}<div id="chart-container">
<canvas id="myDoughnutChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>最新问题
- AU3_Spy.exe是什么？哪里可以找到？
- 按由三个点分隔的整数组成的键对数组进行排序
- Snowflake仓库是像EC2一样基于虚拟机吗？
- Flutter 问题：不透明度和字体大小的同步动画
- PHP 按位或与 Javascript 按位或
- 无法访问模块内的变量
- 数组按具有多级数字的键排序（1.1.2，2.1.3 ...）
- PublishSingleFile 发布多个文件
- Azure AKS/Kubernetes 集群中的 Redis 身份验证和连接 EOF 错误问题
- 将密钥发送到 PowerShell 中打开的窗口
- C - STM32 - 在 while 语句内调用函数导致崩溃
- 通过动态二级键对多维数组的第一级进行排序
- Selenium - 现在找不到服务搜索框来输入文本
- Rust 的 Option<Vec<T>> 如何以及为何优化为 24 字节？
- useState 不反映复选框组上第一个选中状态的更改
- 有什么方法可以让MySQL中的select达到LOW_PRIORITY的效果吗？
- 为什么我的自定义类的实例具有不同的 id，如果它们具有相同的值，而内置类则不会发生相同的情况？ [重复]
- 检查 Android 密钥库密钥密码的正确性
- 这就是如果两个标头互相包含的话项目可能无法编译的原因吗？
- 使用tmap函数显示点的所有属性
© www.soinside.com 2019 - 2024. All rights reserved.