Question

我正在使用angular-chart.js在我的角度应用程序中绘制图表。谁能告诉我如何以编程方式突出显示条形图中的特定条形图？我无法弄明白。

谢谢

Answer 1

从你的问题我假设你正在使用canvas元素。如果是这样，画布不存储对象，而是存储（光栅化）图像。

但是，如果您操作chart.js帮助函数，则可以访问canvas-data：

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="favicon.ico" typ="image/x-icon">
    <title>Untitled Document</title>
    <meta name="Author" content="" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js"></script>
    <script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script src="node_modules/chart.js/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
    <script src="chart_helpers.js"></script>
    <script src="script2.js"></script>
</head>  
<body ng-app="app">
    <div ng-controller="BarCtrl">
        <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" colours="custom_colours"> chart-series="series" </canvas>
    </div>  
</body>
</html>

＆＃34; script2.js＆＃34;：AngularJs脚本

angular.module("app", ["chart.js"])
    .controller("BarCtrl", function ($scope) {
      $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
      $scope.series = ['Series A'];

      $scope.data = [ [65, 59, 80, 81, 56, 55, 40]];

//set your custom colors here using the *fillColor property*
   $scope.custom_colours =  [{fillColor:['#e53a35', '#fef380', '#dcc2aa', '#37617a', '#63c6ae', '#c8c5e5', '#d5ffff']}];
});

＆＃34; chart_helpers.js＆＃34; ：chartJs helper 操作脚本：

helpers.each(dataset.data, function(dataPoint, index) {
    //This handles each piece of data, getting it ready to draw.
    datasetObject.bars.push(new this.BarClass({
        value: dataPoint,
        label: data.labels[index],
        datasetLabel: dataset.label,
        strokeColor: dataset.strokeColor,
        fillColor: dataset.fillColor[index] || dataset.fillColor,
        highlightFill: dataset.highlightFill || dataset.fillColor,
        highlightStroke: dataset.highlightStroke || dataset.strokeColor
    }));
}, this);

我如何以chartJs + angular编程方式设置bar fillColor

1 个答案: