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

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

2 个答案: