0
302
ViewsEl gráfico de barras de gráficos ng2 necesita espacio entre 2 barras en serie Angular
Estoy trabajando en la aplicación Angular con ng2-charts. Estoy tratando de mostrar dos series de datos en un gráfico de barras. Puedo hacerlo con éxito, pero mis barras se pegan dos entre sí. Quiero espacio entre mis dos barras.
Si elimino el grosor de la barra de los datos, automáticamente toma el espacio entre las barras, pero luego las barras son tan gruesas que no se ajustan a mi diseño. Estoy tratando de lograr algo como https://appstack.bootlab.io/charts-chartjs.html este sitio web.
A continuación se muestra mi código.
gráfico.html
<div style="display: block;"> <canvas baseChart [datasets]="barChartData" [colors] = "barChartColors" [labels]="barChartLabels" [options]="barChartOptions" [plugins]="barChartPlugins" [legend]="barChartLegend" [chartType]="barChartType"> </canvas> </div>Gráfico.ts
public barChartOptions: ChartOptions = { scales: { xAxes: [ { gridLines: { display: false } } ], yAxes: [ { gridLines: { display: false }, ticks: { beginAtZero: true } } ] }, responsive: true, cornerRadius: 100, plugins: { labels: { render: 'value' } }, legend: { position: 'bottom', labels: { fontColor: 'black', boxWidth: 20, padding: 20, fontFamily: 'Poppins', fontSize: 13 } }, animation: { animateScale: true, animateRotate: true } }; public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; public barChartType: ChartType = 'bar'; public barChartLegend = true; public barChartPlugins = []; public barChartColors = [{ backgroundColor: '#3f80ea', borderColor: '#3f80ea', pointBackgroundColor: 'rgba(148,159,177,1)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(148,159,177,0.8)', borderWidth: 3 }] public barChartData: ChartDataSets[] = [ { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', barThickness :10 }, { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B', barThickness :10} ];Cualquier ayuda será muy apreciada ya que estoy haciendo mi mejor esfuerzo como principiante para superar esto.
1 answers
Answer question0
Si entiendo lo que quiere decir, quiere que cada parte del gráfico de barras se duplique. Eso significa mostrarle dos datos.
ingrese la descripción de la imagen aquí
Ahora solo necesitas escribir la sección de escalas así
scales: { x: { stacked: true, }, y: { stacked: true, } }, import { Component, ViewChild } from '@angular/core'; import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js'; import { BaseChartDirective } from 'ng2-charts'; import DataLabelsPlugin from 'chartjs-plugin-datalabels'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined; public barChartOptions: ChartConfiguration['options'] = { responsive: true, // We use these empty structures as placeholders for dynamic theming. // scales: { // x: {}, // y: { // min: 10 // } // }, scales: { x: { stacked: true, }, y: { stacked: true, } }, plugins: { legend: { display: true, }, datalabels: { anchor: 'end', align: 'end' } } }; public barChartType: ChartType = 'bar'; public barChartPlugins = [ DataLabelsPlugin ]; public barChartData: ChartData<'bar'> = { labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'], datasets: [ { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' }, { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' } ] }; // events public chartClicked({ event, active }: { event?: ChartEvent, active?: {}[] }): void { console.log(event, active); } public chartHovered({ event, active }: { event?: ChartEvent, active?: {}[] }): void { console.log(event, active); } public randomize(): void { // Only Change 3 values this.barChartData.datasets[0].data = [ Math.round(Math.random() * 100), 59, 80, Math.round(Math.random() * 100), 56, Math.round(Math.random() * 100), 40]; this.chart?.update(); } } <div> <div> <div style="display: block"> <canvas baseChart [data]="barChartData" [options]="barChartOptions" [plugins]="barChartPlugins" [type]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"> </canvas> </div> <button mat-button mat-raised-button color="primary" (click)="randomize()">Update</button> </div> </div>Realmente no es muy probable, pero estoy usando la última versión de Angular