有没有办法在chartjs中展开圆环图onclick事件或鼠标悬停的切片? 我正在使用 [电子邮件受保护] 版本。
我已经使用以下代码解决了这个问题:
let segment;
this.chart = new Chart(this.canvas, {
type: this.type,
data: this.data,
options: {
...this.options,
onHover: function (evt, elements) {
if (elements && elements.length) {
segment = elements[0];
this.chart.update();
selectedIndex = segment["_index"];
segment._model.outerRadius += 10;
} else {
if (segment) {
segment._model.outerRadius -= 10;
}
segment = null;
}
},
layout: {
padding: 30
}
}
});
希望对你有帮助。
Shift-缩放当前选定的切片不是一项功能,但它已在各种论坛和项目的 GitHub 社区上讨论过多次:
Github 讨论包含某人使用 Chart.js 1.0 为饼图编写的一个小提琴。这是当前 Chart.js 版本的更新版本,支持圆环图。
代码:
这部分只展示了缩放活动元素的部分,只是为了让您了解如何使用活动元素的
.innerRadius
和 .outerRadius
属性来移动元素。 fiddle 包含完整的代码,还可以处理缩小先前选定的元素。
<div style="width:400px;">
<canvas id="myChart" width="200" height="200"></canvas>
</div>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'doughnut',
options: {
layout: {
padding: 30
}
},
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [
{
label: '# of Votes',
data: [4, 5, 3],
backgroundColor: [
'rgba(255, 0, 0, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 3
}]
}
});
var addRadiusMargin = 10;
$('#myChart').on('click', function(event) {
var activePoints = myChart.getElementsAtEvent(event);
if (activePoints.length > 0) {
// update the newly selected piece
activePoints[0]['_model'].innerRadius = activePoints[0]['_model'].innerRadius +
addRadiusMargin;
activePoints[0]['_model'].outerRadius = activePoints[0]['_model'].outerRadius +
addRadiusMargin;
}
myChart.render(300, false);
}
示例图片:
这是突出显示的切片的示例:
限制:
我未包含的示例有两个限制:
x
和 y
属性平移活动切片的 .startAngle
和 .endAngle
。另一个简单的技巧:
hoverBorderWidth
var ctx = document.getElementById("chart").getContext('2d');
var chart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Microsoft Internet Explorer", "Google Chrome", "Mozilla Firefox", "Opera", "Safari"],
datasets: [{
label: 'Number of votes',
data: [60, 20, 10, 8, 5],
backgroundColor: ['#96ceff', '#424348', '#91ee7c', '#f7a35b', '#8286e9'],
borderColor: '#fff',
borderWidth: 1,
hoverBorderColor: ['#96ceff', '#424348', '#91ee7c', '#f7a35b', '#8286e9'],
hoverBorderWidth: 8
}]
},
options: {
responsive: false,
legend: {
display: false
},
tooltips: {
displayColors: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="350" height="350"></canvas>
这对于您可以控制的这些方面很有帮助。
间距:10,
cutout: 110, // 如果需要,调整剪切值以获得更多空间
偏移量: [150, 0, 0, 0, 0]
import React, { useEffect, useRef } from 'react';
import Chart from 'chart.js/auto';
const DoughnutChart = () => {
const chartRef = useRef(null);
useEffect(() => {
const ctx = chartRef.current.getContext('2d');
const myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
datasets: [{
label: 'My Dataset',
data: [100, 100, 100, 100, 100],
backgroundColor: [
'#73BBC3',
'#73BBC3',
'#73BBC3',
'#73BBC3',
'#73BBC3'
],
spacing: 10,
cutout: 110, // Adjust cutout value for more space if needed
offset: [150, 0, 0, 0, 0]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
display: false
},
title: {
display: false,
text: 'Customizable Donut Chart'
},
},
animation: {
duration: 2,
easing: 'easeInOutQuad'
},
onClick: (event, elements) => {
if (elements.length > 0) {
const index = elements[0].index;
const dataset = myChart.data.datasets[0];
// Update clicked slice color and offset
dataset.backgroundColor[index] = '#1D666D';
dataset.offset.fill(0);
dataset.offset[index] = 150;
for (let i = 0; i < dataset.backgroundColor.length; i++) {
if (i !== index) {
dataset.backgroundColor[i] = '#73BBC3';
}
}
myChart.update();
}
}
}
});
// Draw text on the slices
// Cleanup function (optional for performance)
return () => {
myChart.destroy();
};
}, []);
return (
<div>
<canvas ref={chartRef} width="500" height="500" />
</div>
);
};
export default DoughnutChart;
这是我的输出 [在此输入图像描述][1] [[1]:https://i.sstatic.net/TMHliA4J.png][1]