Angularjs Angular-chart.js单击工具栏并更改其背景色

我正在使用angular-chart.js绘制一个简单的条形图，当我单击条形图时，如何更改背景颜色

 $scope.click = function (points, evt) {
    // console.log(points,evt);
};

---

你可以点击一下

 onClick: (point, elements) => {
      if (elements && elements.length) {
        var segment = elements[0];
        segment._model.backgroundColor = "#f6954d"

        $scope.colors[segment._index] = "#f6954d";
        $scope.$apply();
      }
    }

---

对于像我这样使用遗留代码的人。。。 我有一个答案

使用angular-chart.js，使用图表数据集覆盖属性。使用此选项，可以将borderColor设置为接受表示每个数据索引的数组

<canvas id="myBarChart" 
               class="chart chart-bar"
               chart-colors="colors"
               chart-data="data" 
               chart-labels="labels"
               chart-series="series"
               chart-options="options"
               chart-click="onClick"
               chart-dataset-override="datasetOverride" // <--- what you want
</canvas>

从“创建时”事件中获取图表的参考，如下所示：

$scope.$on('chart-create', function (evt, chart) {
            $scope.chart = chart;
        });

然后在click event函数中使用一个条件，使用事件索引设置增加边框。 如果是这样，我更改了所有4个属性

element[0]._model.borderWidth = 10;
element[0]._chart.config.data.datasets.borderWidth[barIndex] = 10;
element[0]._view.borderWidth = 10;
$scope.datasetOverride[0].borderWidth[element[0]._index] = 10; // something like this

然后参考该图表，并在单击函数结束时调用更新触发器

$scope.chart.update

魔法。抓取更新方法将在图形中创建比$scope更平滑的更改。$apply

希望这对别人有帮助！

---

干杯

什么背景？bar？@Sajeetharan更改条形图背景色当我单击条形图时，你知道如何重新绘制图表吗？ths@Sajeetharan很不错，但我想点击另一个条，其他条恢复之前的背景色@Sajeetharan为什么答案被删除

element[0]._model.borderWidth = 10;
element[0]._chart.config.data.datasets.borderWidth[barIndex] = 10;
element[0]._view.borderWidth = 10;
$scope.datasetOverride[0].borderWidth[element[0]._index] = 10; // something like this