Question

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

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

Answer 1

你可以点击

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

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

<强> DEMO

Answer 2

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

对于angular-chart.js，请使用chart-dataset-override属性。这样，您可以将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.datasetOverride =  [
                            {
                             borderWidth: [0, 0, 0, 0, 0, 0, 0], // defaults to no border
                             borderColor: "rgb(225, 225, 225)", // white
                            }
                            // can add more objects here for other datasets
                           ];

从“创建中”事件中获取对图表的引用，如下所示：

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

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

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

然后引用该图表并在单击功能结束时调用update触发器。

$scope.chart.update();

魔术。掌握更新方法将比$scope.$apply()

在您的图形中创建更平滑的更改

希望这对某人有帮助！干杯。

Angular-chart.js单击栏并更改其背景颜色

2 个答案: