使用angular-chart.js中的chart-dataset-override选项

Question

我正在撰写预算管理申请表,我正在使用angular-chart.js.

我想使用数据集来覆盖初始数据(主要是为了向图表添加新数据,并为每个条形图,标签等提供不同的颜色),并根据数据的值设置标签和颜色.目前,我试图做硬编码,但只有第一个值是覆盖.

这是我正在使用的代码:

angular.module("app2", ["chart.js"]).controller("MixedChartCtrl",
function($scope) {
    $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];

    $scope.labels = ['', ''];
    $scope.data = [65, 11];
    $scope.datasetOverride = [

        {
            label: 'Override Series A',
            borderWidth: 1,
            type: 'bar',
            data: [345]
        },
        {
            label: "Bar chart1",
            borderWidth: 1,
            type: 'bar',
            data: [45]
        }

    ];
});

Answer 1

希望您的问题是，您想要每个单独的数据（对于每个条形）填充颜色/标签/某些内容。

当您有两个数据集时，将使用上面（您的）代码片段。当必须为所有数据设置相同的属性值时，
所有这些数据集属性都将接受String ，并且当您想要为同一数据集中的不同数据设置不同的属性值时，它们也将接受Array[String] 。（如下所示）。

$scope.data = [65,11];
$scope.datasetOverride = [
{
  label: ['something', 'otherthing'],
  borderWidth: [1,2],
  backgroundColor: ['#FF4242','#2291ff']
}
]

所以现在我明白您可能会动态添加数据。
所以你必须将数据推送到DATASET中，如下所示：

$scope.data.push(345);

因此，如果您想为这些设置不同的属性，您需要推送属性（数组）。

$scope.datasetOverride[0][label].push('someother thing');
$scope.datasetOverride[0][borderWidth].push(2);
$scope.datesetOverride[0][backgroundColor].push('#46bfb8');

这将在之前的栏旁边添加一个带有新颜色/标签/等的栏。

我希望我理解你的问题，这会有所帮助。