angular-图表的用法：颜色和字体

Question

我想更改此图表的字体大小和边框颜色。因此我不知道该怎么做，我试图将这些选项放在不同的地方但似乎没有任何效果。我无法理解 angular-chart 选项和 Chart.js 选项之间的绑定逻辑，是否有通用的方法来操作它们？

指令如下：

                <canvas class="chart chart-line" chart-y-axes="axes" chart-data="data" chart-labels="labels"
                        chart-series="series" chart-options="options" chart-legend="true" chart-colours="colours"></canvas>

范围定义如下：

$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
        $scope.series = ['Series A', 'Series B'];
        $scope.axes = ["y-axis-1", "y-axis-2"];
        $scope.data = [
            [65, 59, 80, 81, 56, 55, 40],
            [28, 48, 40, 19, 86, 27, 90]
        ];
        $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)'
        }]
        $scope.options = {
            datasetFill: false,
            showLines: true,
            elements:
            {
                line:
                {
                    fill: false,
                    tension: 0.0001
                },
                point:
                {
                    radius: 0
                }
            },
            scales:
            {
                yAxes: [
                    {
                        type:"linear",
                        id:$scope.axes[0],
                        gridLines:
                        {
                            display: false
                        }
                    },
                    {
                        type:"linear",
                        id:$scope.axes[1],
                        position: "right",
                        gridLines:
                        {
                            display: false
                        },
                        scaleLabel:
                        {
                            display: true
                        }
                    }]
            },
        };

通过 chart-colors 更改颜色是行不通的。

Answer 1

因为您有 2 个系列，请确保您在 $scope.colours 中有 2 个条目，即

...
$scope.colours = [{
    fillColor: 'rgba(151,187,205,0.2)',
    strokeColor: 'red',
    pointColor: 'rgba(151,187,205,1)',
    pointStrokeColor: '#fff',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(151,187,205,0.8)'
}, {
    fillColor: 'rgba(151,187,205,0.2)',
    strokeColor: 'blue',
    pointColor: 'rgba(151,187,205,1)',
    pointStrokeColor: '#fff',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(151,187,205,0.8)'
}]
...

Fiddle - http://jsfiddle.net/cpdh1g19/（第一行的颜色会在 2 秒后改变）

Answer 2

看选项，你用的是chart.js2.0，需要用最新的angular-chart.js.

请注意，该属性现在是图表颜色，颜色属性在 chart.js 2.0 中已更改。

angular-图表的用法：颜色和字体

Usage for angular-chart : colors and fonts

chart.js

angular-chart