在Angular中具有三个部分的单个堆叠条形图

Question

我是一个新的Angular。我想实现 vertical bar 或有三种颜色的叠加条。颜色区域取决于数值，如 Accept -10, reject-6, pending -20.

当我点击一个部分，它应该发射的事件。

我有一个需求截图

我已经通过许多文章，但他们显示的图表与多个垂直的酒吧不是单一的。这个 和 这个

如何实现？

Answer 1

经过一天的努力，我终于开发出了它，使用了 Chart.js

ngOnInit() {
this.chart = new Chart("Chart1", {
type: 'bar',
data: {
    labels: [''],
    datasets: [{
        pointHoverBackgroundColor: 'red',
        label: 'Unenrolled',
        data: [27],
        backgroundColor:"#FF1C00"


    },
    {
        label: 'Enrolled',
        data: [40],
        backgroundColor:"#ED872D"
    },
    {
        label: 'Registerded',                
        data: [12],
        strokeColor: "#F29220",
        backgroundColor:"#318CE7"
    }

],

},
options: {

    tooltips: {
        mode: 'dataset'
    },
    responsive: true,
    legend: {
        display: true,
        position: 'bottom',
        labels: {
            fontSize: 10,
            usePointStyle: true
        }
      },
    scales: {
      yAxes: [{
        type: 'linear',
        display: true,
        position:"left",
        barRoundness: 0.3,
        barPercentage: 0.4,
        stacked: true,             
        ticks: {
            stepSize: 20,
            suggestedMax: 80,
            beginAtZero: true
        }
      }],
      xAxes: [{
        position:"right",
        stacked: true,
        display: true,
        scaleLabel: {
            display: true,
            labelString: ''},
        barPercentage: 0.3,
        barRoundness: 0.3,
        ticks: {
          beginAtZero: true
        }
      }]

    }
}
});

};

showData(evt:any)
{
  var data = this.chart.getElementsAtEvent(evt)
  console.log(data[0]._model); // it prints the value of the property
}

这就是 html 和 css 档案

<div id="mydiv">
  <canvas id="Chart1" height="30px"  (click)="showData($event)"></canvas>
</div>

#mydiv
{
display: block;
width: 300px;
height: 400px;
}

输出截图。