无法解析折线图中的颜色(angular-chart.js)

Question

我有两种类型的图表栏和行.这是我的观点(苗条):

    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)"...]我做错了什么？

Answer 1

请确保您的数据是双列阵.

例如:

data = [
  [10, 20, 30, 20, 10]
];

Answer 2

我正在使用chart.js并在悬停在一个点上时有相同的异常.当我将数据放入双数组时,图表没有显示任何内容.

解决方案:如果图表的类型为"line",则不会为背景和边框采用颜色数组,而是采用单色.这对我有用:

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
                    }
                }
            ]
        }
    }
});