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

ng2-charts定制'bar'类型

2 个答案: