0

Estoy trabajando con gráficos, pero he estado buscando para que sea de manera horizontal el grafico utilizando el tipo de gráfico 'bar', estoy utilizando estas versiones:

"ng2-charts": "4.1.1",
"chart.js": "4.2.0",

A la hora de buscar información de como realizar el grafico llegue a esta configuración:

import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';
import DataLabelsPlugin from 'chartjs-plugin-datalabels';
@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
      }
    },
    plugins: {
      legend: {
        display: true,
      },
      datalabels: {
        display: false,
        anchor: 'end',
        align: 'end'
      }
    }
  };

  public barChartType: ChartType = 'bar';

  public barChartPlugins = [
    DataLabelsPlugin
  ];

Y para hacer la asignación de la información la hago de esta manera: this.dashService.listFacturasComparativos().subscribe((data: any) => { this.dataFacturas = data;

  let mappedData: MappedData = {
    labels: [],
    datasets: [
      {
        label: 'Presupuesto',
        data: [],
        type: 'line'
      },
      {
        label: 'Real',
        data: [],
        type: 'bar'
      }
    ]
  };

  for (let i = 0; i < this.dataFacturas.length; i++) {
    mappedData.labels.push(this.dataFacturas[i].ejercicio);
    mappedData.datasets[0].data.push(this.dataFacturas[i].p_PRESUPUESTO);
    mappedData.datasets[1].data.push(this.dataFacturas[i].p_REAL);
  }
  this.dataFormatFacturas = mappedData;
});

Todo esto utilizando las siguientes interfaces

interface Dataset {
  label: string;
  data: number[];
  type: string;
}

interface MappedData {
  labels: string[];
  datasets: Dataset[];
}

En el HTML, esta así:

<canvas baseChart class="chart"
        [data]="this.dataFormatFacturas"
        [options]="barChartOptions"
        [plugins]="barChartPlugins"
        [type]="barChartType">
</canvas>

Y muestra el gráfico, el verdadero problema viene cuando lo trato de colocar de manera horizontal, ya que investigando en este link, o este otro veo que configuran al menos en el segundo de esta manera:

public barChartType: ChartType = 'horizontalBar';

Pero para la versión que estoy trabajando no encuentra ese tipo de gráfico, trate de instalar las versiones estas:

"chart.js": "^2.7.3",
"ng2-charts": "2.0.0-beta.9"

Pero me marcan un montón de errores ya que utilizo angular 14 y no se como configurar lo ya que en otros links, me mandan a utilizar la siguiente manera:

options: {
        scales: {
            yAxis: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                barThickness: 10
            }]
        },
        legend: {
            display: false
        }
    }

Pero me marcan errores al utilizar yAxis

1 respuesta 1

0

SOLUCIÓN

Investigando un poco mas, en algunos tutoriales que encontré ocupaban estas versiones:

"chart.js": "^2.9.3",
"ng2-charts": "^2.4.0",

a lo cual ocupe y si les causa algun problema al instalar ocupen npm i --save [email protected] --legacy-peer-deps y npm i --save [email protected] --legacy-peer-deps y se soluciona el inconveniente.

Para importar en app.module.ts hacen esto:

import { ChartsModule } from 'ng2-charts';
//En los imports solo esto
ChartsModule,

Para el html se usa esto:

<div style="display: block;">
  <canvas baseChart
          [datasets]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartOptions"
          [colors]="barChartColors"
          [plugins]="barChartPlugins"
          [legend]="barChartLegend"
          [chartType]="barChartType">
  </canvas>
</div>

Y en el typeScript usan esto:

import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label, Color } from 'ng2-charts';
//....
 public barChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      xAxes: [{
        gridLines: {
          display: true
        },
        stacked: true,
        ticks: {
          beginAtZero: false,
        },
      }],
      yAxes: [{
        gridLines: {
          display: true
        },
        stacked: true,
        ticks: {
          beginAtZero: false,
        },
      }]
    },
    tooltips: {
      mode: 'index',
    }
  };

  public barChartColors: Color[] = [
    {
      backgroundColor: ["#ffffb2", "#fecc5c", "#fd8d3c", "#e31a1c"],
      borderColor: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)']
    },
    {
      backgroundColor: ["#f6eff7", "#bdc9e1", "#67a9cf", "#02818a"],
      borderColor: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)']
    }
  ];
  public barChartLabels: Label[] = ['2006', '2007', '2006'];
  public barChartType: ChartType = 'horizontalBar';
  public barChartLegend = true;
  public barChartPlugins = [];

  public barChartData: ChartDataSets[] = [
    { data: [[65, 59], [80, 81], [56, 55]], label: 'Series A', borderWidth: 0},
    { data: [[28, 48], [40, 19], [86, 27]], label: 'Series B', borderWidth: 0 }
  ];

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.