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

Question

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

Answer 1

最好的方法是更改​​单击部分的颜色。

在您的标记中：

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

在您的控制器中：

$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
}

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

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