在Angular 2中使用chart.js在条形图内显示数据

时间:2019-03-04 07:57:25

标签: angular chart.js

我使用chart.js创建了堆叠的条形图。

data = {
    labels: ["first", "second", "third", "forth"],
    datasets: [{
      data: [43,30,23,88],
      label: 'Passed',
      backgroundColor: 'darkgreen',
    }, {
      data: [10, 12, 8, 20],
      label: 'Failed',
      backgroundColor: 'red',
    }],
  };

options = {
    maintainAspectRatio: true,
    responsive: true,
    legend: {
      labels: {  
        fontColor: white,
      },
    },
    scales: {
      xAxes: [
        {
          stacked: true,
          gridLines: {
            display: false,
          },
          ticks: {
            fontColor: white,                
          },
        },
      ],
      yAxes: [
        {
          stacked: true,
          gridLines: {
            display: true,
          },
          ticks: {
            fontColor: black,
          },
        },
      ],
    },

  };

<chart type="bar" [data]="data" [options]="options" ></chart>

此创建图表。

我想在栏中显示数据。

就像我要写的一样,它显示在栏中,显示计数和名称。

我的图的输出:

output

我想要这样的输出

Expected output

0 个答案:

没有答案