有没有办法在chartjs中的click事件或鼠标悬停时展开圆环图的切片?.我使用的是chart.js@2.8.0 version.
deikduxw1#
我已使用以下代码修复了此问题:
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 } } });
希望对你有帮助。
hec6srdp2#
Shift+缩放当前选中的切片并不是一个功能,但它已经在各种论坛和项目的GitHub社区中讨论过多次:
Github讨论中包含了一个使用Chart.js 1.0为饼图编写的小提琴。下面是当前Chart.js版本的更新版本,它支持圆环图。
代码:
这部分只展示了缩放活动元素的部分,它只是让你知道如何使用活动元素的.innerRadius和.outerRadius属性来移动元素。fiddle包含了完整的代码,也处理了缩小先前选择的元素。第一个
.innerRadius
.outerRadius
示例图像:
以下是突出显示的切片的示例:
限制:
这个示例有两个限制,我没有包括在内:
.startAngle
.endAngle
x
y
vm0i2vca3#
另一个简单的窍门:hoverBorderWidth第一个
hoverBorderWidth
3条答案
按热度按时间deikduxw1#
我已使用以下代码修复了此问题:
希望对你有帮助。
hec6srdp2#
Shift+缩放当前选中的切片并不是一个功能,但它已经在各种论坛和项目的GitHub社区中讨论过多次:
Github讨论中包含了一个使用Chart.js 1.0为饼图编写的小提琴。下面是当前Chart.js版本的更新版本,它支持圆环图。
代码:
这部分只展示了缩放活动元素的部分,它只是让你知道如何使用活动元素的
.innerRadius
和.outerRadius
属性来移动元素。fiddle包含了完整的代码,也处理了缩小先前选择的元素。第一个
示例图像:
以下是突出显示的切片的示例:
限制:
这个示例有两个限制,我没有包括在内:
.startAngle
和.endAngle
属性平移活动切片的x
和y
。vm0i2vca3#
另一个简单的窍门:
hoverBorderWidth
第一个