Невозможно разобрать цвет на линейной диаграмме (angular-chart.js)

У меня есть 2 типа диаграмм бар и линия. Это мой взгляд (в тонком):

    canvas#line.chart.chart-line(
      ng-if="stateStats == 'global'"
      chart-data="data"
      chart-labels="labels"
      chart-colours="colours"
    )
    canvas#bar.chart.chart-bar(
      ng-if="stateStats != 'global' && data.length != 0"
      chart-data="data"
      chart-labels="labels"
      chart-options="optionsBarChart"
    )

Мой вариант цвета:

$scope.colours = [{
    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)"
  }];

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

Неперехваченная ошибка: невозможно проанализировать цвет объекта ["rgba(151,187,205,1)","rgba(220,220,220,1)"...] Что я сделал не так?


chart.js angularjs angular-chart
person myf    schedule 07.07.2016    source источник
comment
Можете ли вы попытаться опубликовать полный репродукционный пример, используя этот шаблон?   -  person jtblin    schedule 08.07.2016
comment
Была такая же проблема, когда я напрямую передал свой массив данных. Вместо этого его следует передать в другом массиве, например. данные = [[1, 2, 3]]. Не могу сказать, есть ли у вас такая же проблема, поскольку вы не включили определение данных.   -  person tom    schedule 15.07.2016

Ответы (2)


arrow_upward
42
arrow_downward

Убедитесь, что ваши данные находятся в двойном массиве.

Ex: 

data = [
  [10, 20, 30, 20, 10]
];
person Ashraful Islam    schedule 23.08.2016

arrow_upward
12
arrow_downward

Я использовал chart.js и имел такое же исключение при наведении курсора на точку. Когда я поместил свои данные в двойной массив, диаграмма ничего не показала.

Решение. Если диаграмма имеет тип «линия», она принимает не массив цветов для фона и границы, а отдельные цвета. Это сработало для меня:

var chart = new Chart(chartCanvas, {
    type : 'line',
    data : {
        labels : dates,
        datasets : [{
                label : 'Error',
                data : errorCounts,
                backgroundColor : 'rgba(255, 99, 132, 0.2)',
                borderColor : 'rgba(255,99,132,1)',
                borderWidth : 1
            }, {
                label : 'Ok',
                data : okCounts,
                backgroundColor : 'rgba(75, 202, 72, 0.2)',
                borderColor : 'rgba(117,239,95,1)',
                borderWidth : 1
            }
        ]
    },
    options : {
        responsive : true,
        scales : {
            yAxes : [{
                    ticks : {
                        beginAtZero : true
                    }
                }
            ]
        }
    }
});
person laekwondo    schedule 12.01.2017