Гистограмма angular-chart.js со 100% непрозрачностью цвета

ОБНОВЛЕНИЕ 2 ИЮНЯ 2017 Г.: мы исправили проблему, но не из ответов здесь. Я постараюсь добавить решение, которое у нас есть, если я его нашел. Мы также переключились на angular-nvd3, который использует d3.

РЕДАКТИРОВАТЬ 1: добавлено backgroundColor в опции, но все равно не работает. Не уверен, что я поставил его в правильном месте.

Используя образец здесь. Как сделать заливку цветом на 100%?

JS:

$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
$scope.type = 'StackedBar';
$scope.series = ['2015', '2016'];
//$scope.colors = ['#AA1921', '#18AF5C'];
$scope.options = {
    scales: {
        xAxes: [{
            stacked: true,
        }],
        yAxes: [{
            stacked: true
        }]
    },
    title: {
        display: true,
        text: 'My First Bar Chart'
    },
    // added as suggested
    backgroundColor: ['rgba(170, 25, 33, 1)', 'rgba(170, 25, 33, 1)']
};
$scope.data = [
    [65, 59, 90, 81, 56, 55, 40],
    [28, 48, 40, 19, 96, 27, 100]
];

HTML

<canvas class="chart chart-bar" 
    chart-data="data" 
    chart-labels="labels"
    chart-options="options" 
    chart-series="series"
    chart-colors="colors"></canvas>
    <!-- chart-colors is removed when using the backgroundColor -->

Я действительно хочу использовать такую ​​реализацию, но большинство проблем, которые я нахожу, связаны с другой реализацией.


javascript chart.js angularjs angular-chart
person Dev    schedule 11.08.2016    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Вам нужно объявить полноцветный объект, если вы хотите поиграть с непрозрачностью. Вы можете использовать шестнадцатеричный или rgba

HTML:

<canvas class="chart chart-bar" 
    chart-data="data" 
    chart-labels="labels"
    chart-options="options" 
    chart-series="series"
    chart-colors="colors"></canvas>

js:

$scope.compareChart.colors = [
    {
        backgroundColor: '#b3e7fb',
        borderColor: '#b3e7fb',
        hoverBackgroundColor: '#b3e7fb',
        hoverBorderColor: '#b3e7fb'
    }
];

См. https://github.com/jtblin/angular-chart.js/issues/ 131

person Matthew Dolman    schedule 20.10.2016

arrow_upward
0
arrow_downward

Angular-chartJS использует chart-options из конфигурации параметров ChartJS. Установите backgroundColor в параметрах.

Источник: https://github.com/jtblin/angular-chart.js

person IronAces    schedule 11.08.2016
comment
Теперь мои варианты выглядят так: $scope.options={scales:{xAxes:[{stacked:!0}],yAxes:[{stacked:!0}]},title:{display:!0,text:"My First Bar Chart"},backgroundColor:["rgba(170, 25, 33, 1)","rgba(170, 25, 33, 1)"]}; Но все еще не заполнено на 100%. - person Dev; 11.08.2016

arrow_upward
0
arrow_downward

Попробуйте добавить такие цвета, это должно сработать:

rgba(170, 25, 33, 1)
person user3743266    schedule 11.08.2016
comment
Теперь мои варианты выглядят так: $scope.options={scales:{xAxes:[{stacked:!0}],yAxes:[{stacked:!0}]},title:{display:!0,text:"My First Bar Chart"},backgroundColor:["rgba(170, 25, 33, 1)","rgba(170, 25, 33, 1)"]}; Но все еще не заполнено на 100%. - person Dev; 11.08.2016