NG2-карты настройка «бара» типа

Question

Мне нужен очень простой график, как это

Я знаю, как сделать это с chart.js

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

, но похоже, что это не так легко с ng2-диаграммами. У меня есть этот

<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) выравнивать проблемы (когда я фиксирую длинные метки, разделяя их на массивы)

UPDATE я, наконец, приходят с этим

<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