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');

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

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

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

1 个答案: