0

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

4

2 回答 2

2

由于您有 2 个系列，请确保您在$scope.coloursie中有 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 秒后改变）

于 2016-05-07T00:12:27.147 回答
1

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

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

于 2016-05-08T22:08:22.093 回答