Không thể phân tích màu trong biểu đồ dạng đường (angular-chart.js)

Question

Tôi có 2 loại biểu đồ và đường kẻ. Đây là quan điểm của tôi (trong mỏng):

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" 
    ) 

màu sắc của tôi lựa chọn:

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

Vấn đề của tôi là tôi không thể thay đổi màu của dữ liệu hiển thị trên line-biểu đồ. Và khi tôi muốn di chuyển con trỏ trên điểm - Tôi gặp lỗi:

Lỗi không bắt buộc: Không thể phân tích màu từ đối tượng ["rgba (151,187,205,1)", "rgba (220,220,220,1)" ... ] Tôi đã làm gì sai?

Answer 1

Hãy đảm bảo rằng dữ liệu của bạn nằm trên mảng kép.

Ex:

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

Answer 2

Tôi đã sử dụng chart.js và có cùng một ngoại lệ khi lơ lửng trên một điểm. Khi tôi đặt dữ liệu của tôi trong mảng kép, biểu đồ không hiển thị bất cứ điều gì.

Giải pháp: Nếu biểu đồ có loại 'dòng', nó không có một mảng màu cho nền và đường viền, nhưng màu đơn. này đã làm việc cho tôi:

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