Linee tra le colonne impilate nel grafico a barre dei grafici ng2

Aug 21 2020

Sto lavorando su ng2-chartsun grafico a barre in pila in cui voglio ottenere la separazione tra ogni serie. Qualcosa di simile alle immagini sottostanti. La linea o l'ombreggiatura dello sfondo va bene qualsiasi cosa.

Ho implementato separatamente grafici a barre in pila e grafici a linee. Come posso ottenere le linee/sfumature nel grafico a barre in pila per differenziare le colonne.

Stackblitz | Grafico a barre in pila

Stackblitz | Grafico a linee

Risposte

1 Rohith Aug 21 2020 at 16:54

Puoi aggiungere la linea nel grafico a barre passando di nuovo gli stessi dati con type: linea invece che stacknel tuo esempio.

Sostituisci sotto il codice

public barChartData: ChartDataSets[] = [
  { data: [35, 41, 60, 19, 44, 45, 60, 46, 77, 64, 77, 56] , label: 'Series A', stack: 'a' },
  { data: [65, 59, 40, 81, 56, 55, 40, 54, 23, 36, 23, 44], label: 'Series B', stack: 'a' }
];

con questo

 public barChartData: ChartDataSets[] = [
      { data: [35, 41, 60, 19, 44, 45, 60, 46, 77, 64, 77, 56] , label: 'Series A', stack: 'a' },
      { data: [35, 41, 60, 19, 44, 45, 60, 46, 77, 64, 77, 56] ,  type: 'line' }, // new line
      { data: [65, 59, 40, 81, 56, 55, 40, 54, 23, 36, 23, 44], label: 'Series B', stack: 'a' }
    ];

Potrebbe esserci un approccio migliore di questo invece di duplicare i dati. Ma non ne sono a conoscenza