Question

这个问题是关于angular-chartjs 1.1.1。

首先，我想禁用图表上的悬停颜色。我已将以下选项设置为false：

tooltips: {
    enabled: false
},
hover: {
    enabled: false
},

这不起作用所以我决定改变我的圆环图的颜色，包括highlightColor。为了设置颜色，我将指令chart-colors="colors"添加到画布中。在我的范围内，我添加了以下内容：

$scope.colors = [{
    fill: true,
    backgroundColor: ["#FF6384","#36A2EB"]
}]

我也尝试了以下内容：

$scope.colors = [{
    fill: true,
    backgroundColor: "#FF6384"
},{
    fill: true,
    backgroundColor: "#36A2EB"
}]

两个代码段都无法正常工作。他们只是将我的图表部分变为灰色，而不是指定的颜色。只有以下代码更改了我的图表颜色：

$scope.colors = ["#FF6384","#36A2EB"]

这只会更改backgroundColor，但我也想更改highlightColor，所以此解决方案对我来说无处可选。任何人都知道我如何设置图表的backgroundColor和hightlightColor？

Answer 1

你能提供完整的代码吗？是否能让合格的答案变得更容易。

基于我假设的https://stackoverflow.com/a/28654829/6629704，您可能应该为数组添加两种颜色，因为数组的第3和第4位可能会定义高亮颜色

Answer 2

我找到了解决方案。我似乎必须使用这个措辞：

colors: [{
    backgroundColor: '#FF6384',
    pointBackgroundColor: '#FF6384'
}, {
    backgroundColor: '#36A2EB',
    pointBackgroundColor: '#36A2EB'
}],

因此pointBackgroundColor将更改图表颜色而不是backgroundColor本身。悬停效果需要backgroundColor，因此poinBackground将不可见，背景将显示在前面。

感谢@Dominik Heim，您的链接非常有帮助！

angular-chartJs更改图表背景并突出显示颜色

2 个答案: