时间戳

首页 > 解决方案 > 错误渲染的条形图 Chart.js

angular - 错误渲染的条形图 Chart.js

问题描述

我想显示一个条形图，但每个水平标签都有两个条，实际上我需要为每个水平标签显示一个条，而不是一个标签中的 2 个，因为每个水平标签代表一个条，

这是水平标签

public barChartLabels: Label[] = ['Bodega 1', 'Bodega 2'];

这是数据，

public barChartData: ChartDataSets[] = [
    { data: [65], label: 'Bodega 1' },
  { data: [80], label: 'Bodega 2' }
  ];

我在每个数据项中都包含一个标签，因为我需要显示图例。

这是我的代码：

https://stackblitz.com/edit/ng2-charts-bar-template-sbnrc5

谢谢

标签： angularchart.js

解决方案

将此粘贴到您的代码中：

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public barChartOptions: ChartOptions = {
    title: {
      display: true,
      text: 'Bodegas',
      fontSize: 16
    },
    responsive: true,
    scales: {
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        stacked: true
      }]
    },
    legend: {
      display: false
    }
  };
public barChartLabels: Label[] = ['Bodega 1', 'Bodega 2'];
public barChartType: ChartType = 'bar';
public barChartLegend = true;
public barChartPlugins = [];

public barChartData: ChartDataSets[] = [
  { data: [65, 0], label: 'Bodegas', backgroundColor: 'pink', hoverBackgroundColor: 'pink', borderWidth: 0 },
  { data: [0, 80], label: 'Bodegas', backgroundColor: 'blue', hoverBackgroundColor: 'blue', borderWidth: 0 }
]

  constructor() { }

  ngOnInit() {
  }
}

我认为“传说”是不必要的，但如果你想展示它，那么将它的值更改为true

推荐阅读