'bar' 类型的 ng2-charts 自定义

Question

我需要一个像这样的非常简单的图表

我知道如何使用 chart.js

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

，但看起来使用 ng2-charts 并不那么容易。我有这个

<canvas baseChart
        [datasets]="[{data: [65, 59, 80], label: 'Series A'}]"
        [labels]="[['Eingezahlte', 'Beiträge'], ['Guthaben', 'heute'], ['Guthaben nach', 'Rückzahlung']]"
        [chartType]="'bar'">
</canvas>

1) 我需要不同的颜色 2) 对齐问题（当我通过将长标签分隔成数组来修复长标签时）

更新终于有了这个

<canvas baseChart
   [datasets]="barChartData"
   [labels]="['']"
   [chartType]="'bar'"
   [legend]="false"
   [options]="options"
>
</canvas>
public barChartData:any[] = [
        {
            data: ['7000'], label: 'Eingezahlte Beiträge'
        },
        {
            data: ['6000'], label: 'Guthaben heute'
        },
        {
            data: ['10000'], label: 'Guthaben nach Rückzahlung'
        }
    ];

    public options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    maxTicksLimit: 5,
                    // Create scientific notation labels
                    callback: function(value, index, values) {
                        return value + ' €';
                    }
                }
            }],
            xAxes: [{
                categoryPercentage: 1.0,
                barPercentage: 0.6
            }]
        }
    };

剩下的唯一问题是我想要底部的标签，但我可以用 html

Answer 1

关于颜色的问题在于您对数据集的定义。而不是

[datasets]="[{data: [65, 59, 80], label: 'Series A'}]"

确实应该

[datasets]="[{data: [65], label: 'Series A'},
             {data: [59], label: 'Series B'},
             {data: [80], label: 'Series C'}]

这样你可以获得不同的颜色，因为每个数据集都有自己的颜色。

Answer 2

您需要包括[颜色]

然后

private colors = [
{
  backgroundColor: [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(0, 255, 0, 0.2)',
    'rgba(102, 0, 204, 0.2)',
    'rgba(255, 128, 0, 0.2)'
  ]
}
];

演示：http://plnkr.co/edit/0lxpDg?p=preview

来源：https://github.com/valor-software/ng2-charts/issues/606

'bar' 类型的 ng2-charts 自定义

ng2-charts customization of 'bar' type

ng2-charts

angular