Question

我想更改此图表的字体大小和边框颜色。因此我不知道该怎么做，我试着将这些选项放在不同的地方，但似乎没有任何效果。我无法得到角度图表选项和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)'
}]
...

小提琴 - http://jsfiddle.net/cpdh1g19/（第一行的颜色将在2秒后改变）

Answer 2

通过选项看，你使用的是chart.js 2.0，你需要使用最新的angular-chart.js。

请注意，该属性现在是chart-colors，并且color.js 2.0中的颜色属性已更改。

角度图表的用法：颜色和字体

2 个答案: