如何指定悬停颜色angular-chart.js

Question

我正在使用 angular version of chartJS。我有一个饼图，想指定圆弧的悬停颜色。

显然有人已经做到了：https://github.com/jtblin/angular-chart.js/issues/131#issuecomment-246598518，但我不明白怎么做。

这是我的尝试：http://plnkr.co/edit/1irEj30D9NfRX9qu9H12?p=preview

所以基本上

$scope.colors = [
  {
    backgroundColor: '#A2DED0',
    borderColor: '#A2DED0',
    hoverBackgroundColor: '#A2DED0',
    hoverBorderColor: '#A2DED0'
  }
]

<canvas chart-colors="colors"></canvas>

Answer 1

解决方案是使用 chart-dataset-override。这些例子对我帮助很大：https://github.com/jtblin/angular-chart.js/blob/master/examples/dataset-override.html https://github.com/jtblin/angular-chart.js/blob/master/examples/dataset-override.js

<canvas class="chart chart-doughnut" chart-data="ringChartData.data" chart-labels="ringChartData.labels" chart-options="ringChartData.options" chart-dataset-override="datasetOverride" height="100">
</canvas>

$scope.ringChartData = {
    labels: [],
    data: [],
    options: {
        elements: {
            arc: { 
                borderWidth: 0.7
            }
        },
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                boxWidth: 12
            }
        },
        tooltips: {
            enabled: true,
            callbacks: {
                label: function(tooltipItem, data) {
                    return data.labels[tooltipItem.index] + ': ' + data.datasets[0].data[tooltipItem.index] + ' ' + tooltipSuffix;
                }
            }
        }
    }
};

$scope.datasetOverride = {
    backgroundColor: ['#383a4e', '#A04d4d', '#ff8c00', '#413041', '#7b6888', '#6b486b', '#d68c5b', '#d0743c'],
    hoverBackgroundColor: ['#22243a', '#822e2e', '#c66d00', '#2d1a2d', '#634d72', '#533253', '#B66734', '#AF561E'],
    hoverBorderColor: ['#22243a', '#822e2e', '#c66d00', '#2d1a2d', '#634d72', '#533253', '#B66734', '#AF561E']
};

如何指定悬停颜色angular-chart.js

How to specify hover color angular-chart.js

angularjs

chart.js

angular-chart