angular-chartjs 2 - использовать multi bg-color для диаграмм

Question

angular-chartjs 2 - использовать multi bg-color для диаграмм

0

Plop,

Мне нужна помощь с директивным графиком-цветом угловых диаграмм.

Раньше директива называлась цветами диаграммы.

Я хочу установить несколько цветов для моей диаграммы (например, круговая диаграмма → http://jtblin.github.io/angular-chart.js/)

Я попробовал несколько вещей:

$scope["graph5"].colors = [{fillColor:["#FF0000", "#00FF00", "#0000FF", "#00FFFF", "#FFFF00"]}];

$scope["graph5"].colors = [ { fillColor: '#ffff00' }, { fillColor: '#0066ff' } ];

$scope["graph5"].colors = [{ // blue
        fillColor: 'rgba(151,187,205,0.2)',
        strokeColor: 'rgba(151,187,205,1)',
        pointColor: 'rgba(151,187,205,1)',
        pointStrokeColor: '#fff',
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(151,187,205,0.8)'
    }];

И мой HTML:

<canvas class="chart chart-doughnut" chart-data="graph5.data" chart-labels="graph5.labels" chart-options="graph5.options" chart-colors="graph5.colors"></canvas>

Тонкс!

PS: Извините за мой плохой английский...

Grégory Hoarau 02 июнь 2016, в 18:14

Источник

Теги:

javascript

angularjs

colors

charts

1 ответ

Ещё вопросы

TGarrett · Answer 1 · 2016-06-02T13-58-00.000Z

Это довольно просто... Но на самом деле. Надеюсь, вы сможете следовать.

контроллер:

     $scope.data = {
        labels: ['test', 'test2', 'test3', 'test4', 'test5'],
        datasets: [
            {
                label: 'My previous results',
                fillColor: 'rgba(220,220,220,0.2)',
                strokeColor: 'rgba(220,220,220,1)',
                pointColor: 'rgba(220,220,220,1)',
                pointStrokeColor: '#fff',
                pointHighlightFill: '#fff',
                pointHighlightStroke: 'rgba(220,220,220,1)',
                data: [65, 79, 90, 81, 16]
            },
            {
                label: 'My current results',
                fillColor: 'rgba(151,187,205,0.2)',
                strokeColor: 'rgba(151,187,205,1)',
                pointColor: 'rgba(151,187,205,1)',
                pointStrokeColor: '#fff',
                pointHighlightFill: '#fff',
                pointHighlightStroke: 'rgba(151,187,205,1)',
                data: [28, 48, 40, 19, 96]
            }
        ]
    };

html файл:

       <div ng-controller="ChartController" class="ng-scope">
                    <canvas class="tc-chart" tc-chartjs-radar chart-options="options" chart-data="data" chart-legend="chart4"></canvas>
                    <div class="someclass">
                        <div tc-chartjs-legend="" chart-legend="chart4" class="inline ng-isolate-scope"><ul class="tc-chart-js-legend"><li><span style="background-color:rgba(220,220,220,1)"></span>My First dataset</li><li><span style="background-color:rgba(151,187,205,1)"></span>My Second dataset</li></ul></div>
                    </div>
                </div>

Надеюсь, это даст вам правильное направление.

Извините, но я не совсем понял в своем посте, я использую jtblin / angular-chart.js, а не tc-angular-chartjs