angularjs - 如何在 chart.js 中突出显示单击的 donut 部分或部分？

Question

我正在使用 angularjs 和使用 chart.js 的 angular-charts，但是，我被困在一件事上，即如何突出显示点击的 donut 部分，以便用户知道他/她选择了 donut 的那部分

Answer 1

执行此操作的最佳方法是更改​​所单击部分的颜色。

在您的标记中:

<canvas ...chart-colors="$scope.colors" chart-click="$scope.clickFn"...> </canvas>

在你的 Controller 中:

$scope.clickFn = function(points, event) {
    if (!points || !points.length || !points.length > 0) { return; }

    var indexClicked = points[0]._index;
    $scope.colors[indexClicked] = '#9a9a9a' //your clicked color code
}

这样，下次您的范围摘要出现时，图表将重新绘制您点击的部分并使用新的突出显示颜色。

你也可以用这个做其他事情，比如给所有没有点击的东西上色，禁用动画，这样它就不会在颜色变化时有弹性，等等。但是上面的方法可以解决你的问题。