Как иметь сплошные цветные полосы в гистограмме угловой диаграммы

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

Желаемый результат

Но я не могу понять, как избавиться от альфы, которую chart.js добавляет по умолчанию:

Фактический результат

Мой html выглядит так:

  <body ng-app="myApp" ng-controller="myController as ctrl">
    <canvas id="outreach" class="chart chart-bar" 
        chart-labels="ctrl.socialChart.labels" 
        chart-data="ctrl.socialChart.data" 
        chart-series="ctrl.socialChart.series"
        chart-colors="ctrl.socialChart.colors"
        chart-options="ctrl.socialChart.options"></canvas>      
  </body>

И джаваскрипт:

angular.module('myApp', ['chart.js'])

    .controller('myController', [function() {
        var ctrl = this;

        ctrl.socialChart = {
            options: {
                legend: {
                    display: true
                }
            },
            labels: ['2012'],
            series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
            // colors: ['rgba(237, 64, 42, 1)', 'rgba(240, 171, 5, 1)', 'rgba(160, 180, 33, 1)', 'rgba(0, 163, 159, 1)'],
            colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
            data: [[1178], [652], [1004], [838]]
        }
    }]);

Вот Plunker, демонстрирующий это: Plunker

Я нашел много информации об использовании нотации rgba (которая по какой-то причине дает мне вообще неправильные цвета) и fillColor (которую я вообще не могу заставить работать). Трудно сказать, какая информация относится к версии 1 или 2 диаграммы.js.

Любая помощь будет оценена по достоинству.


javascript charts chart.js angularjs angular-chart
person Jason    schedule 03.11.2016    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Вы можете использовать chart-dataset-override="datasetOverride"

HTML

 <div ng-controller="BarCtrl">
    <canvas id="bar" class="chart chart-bar" 
    chart-data="data" 
    chart-labels="labels" 
    chart-series="series" 
    chart-dataset-override="datasetOverride"></canvas>
  </div>

Контроллер

  ctrl.datasetOverride = [{
        fill: true,
        backgroundColor: [
          "#ED402A",
          "#36A2EB",
          "#FFCE56"
        ]
      }, {
        fill: true,
        backgroundColor: [
          "#F0AB05",
          "#36A2EB",
          "#FFCE56"
        ]
      }, {
        fill: true,
        backgroundColor: [
          "#A0B421",
          "#36A2EB",
          "#FFCE56"
        ]
      }, {
        fill: true,
        backgroundColor: [
          "#00A39F",
          "#36A2EB",
          "#FFCE56"
        ]
      },
    ];

ДЕМО

person Sajeetharan    schedule 03.11.2016
comment
@Sajeetharan У вас есть идеи, как я могу заполнить гистограмму с накоплением? - person VjyV; 23.11.2016
comment
@Sajeetharan Я, конечно, почему бы и нет. - person VjyV; 23.11.2016
comment
я делаю для данных = [[1,2,3,4],[2,5,2,5],[3,6,9,10],[5,7,9,22]] значение, а также устанавливаю вариант имеет шкалы: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true }] }, только что переданный массив цвета в соответствии с тем же u. Извините, что не знаю о создании плунжера - person VjyV; 23.11.2016
comment
создайте плункер и поделитесь здесь или задайте вопрос - person Sajeetharan; 23.11.2016

arrow_upward
1
arrow_downward

Я использую chart.js версии 2 с угловой оболочкой. Мне помогли следующие изменения.

Изменения - цвет принимает аргумент в виде rgba(R,G,B,alpha)
alpha = 1 : сплошной цвет, alpha = 0 : прозрачный цвет

В HTML: <canvas id="bar" class="chart chart-bar" chart-data="barData" chart-labels="filter" chart-series="barLabels" chart-options="baroptions" chart-colors="setColors" > </canvas>

В моем классе Controller я определил setColors следующим образом:

В контроллере.js: $scope.setColors = [{backgroundColor:'rgba(249,166,92,1)',pointBackgroundColor:'rgba(249,166,92,1),pointHoverBackgroundColor:'rgba(249,166,92,1)',borderColor:'rgba(249,166,92,1)',pointBorderColor:'rgba(249,166,92,1)',pointHoverBorderColor:'rgba(249,166,92,1)'}, {backgroundColor:'rgba(90,155,211,1)',pointBackgroundColor:'rgba(90,155,211,1)',pointHoverBackgroundColor:'rgba(90,155,211,1)',borderColor:'rgba(90,155,211,1)',pointBorderColor:'rgba(90,155,211,1)',pointHoverBorderColor:'rgba(90,155,211,1)'}, {backgroundColor:'rgba(120,194,107,1)',pointBackgroundColor:'rgba(120,194,107,1)',pointHoverBackgroundColor:'rgba(120,194,107,1)',borderColor:'rgba(120,194,107,1)',pointBorderColor:'rgba(120,194,107,1)',pointHoverBorderColor:'rgba(120,194,107,1)'}]

person barak_332    schedule 17.01.2017

arrow_upward
0
arrow_downward

Вот коды, которые я сделал для создания гистограммы с пользовательскими настройками. Используйте этот атрибут chart-dataset-override="datasetOverride" в HTML-теге холста:

<canvas id="bar" class="chart chart-bar"
        chart-data="expenseData" chart-labels="labels" chart-series="series" 
        chart-options="chartOptions" chart-dataset override="datasetOverride">
</canvas>


var setGraphDate = function () {
    var xData = [];
    var yData = [];
    $scope.Data.ExpenseRecords.forEach(function (g) {
        yData.push(g.PercentOfCompletion);
        xData.push(g.TspShortName);
    });
    $scope.datasetOverride =
    {
        backgroundColor: "#4E4EFF",
        borderColor: "#2E2E99"
    };
    $scope.labels = xData;
    $scope.expenseData = yData;
    $scope.series = ['Expense Graph'];
   // more options
    $scope.chartOptions = {

        legend: {
            display: false
        },

        },
        title: {
            display: true,
            text: 'TSP Burn Rate'
        },
        events: false,
        tooltips: {
            enabled: false
        },
        hover: {
            animationDuration: 0
        }
};
person Masud Shrabon    schedule 25.01.2018

arrow_upward
0
arrow_downward

Просто используйте RGBA, где A — непрозрачность, и установите для него значение 1, которое определяет сплошной цвет. Пример: backgroundColor: [ 'rgba(255, 99, 132, 1)']

person Shivam Sagar    schedule 04.08.2018
comment
разве вы не можете просто попросить меня исправить форматирование кода вместо того, чтобы голосовать за правильный ответ? - person Shivam Sagar; 08.08.2018
comment
@Mohammad Kanan Я новичок в stackoverflow, и это был мой самый первый комментарий ... вы должны были сказать мне сначала, но вы решили понизить его ... Теперь ваши действия повлияют на мою репутацию. - person Shivam Sagar; 08.08.2018
comment
Хм!! почему вы думаете, что я заминусовал ваш ответ?! Я не ..., вы, кажется, неправильно понимаете, что такое редактирование в SO, .. людей привлекает редактирование ответов, особенно правильных, чтобы улучшить их (это помогает вам получить больше голосов), в то время как низкий качественные ответы, которые не соответствуют SO, обычно удаляются .. понижающее голосование относится к техническому аспекту ответа (может быть его неправильно) .. при редактировании используется только для вопросов форматирования .. технически я даже не знаю, если ваш ответ неверен? вы можете оставить комментарий и спросить, почему ваш ответ был отклонен? что в этом технически не так? - person Mohammad Kanan; 08.08.2018