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

Question

我是 Angular 的新手。我想实现vertical bar 或三种颜色的堆叠条。颜色区域取决于 Accept -10, reject-6, pending -20 等值。

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

我有一个需求截图

我浏览了许多文章，但它们显示的图表包含多个垂直条而不是单个。 This 和 this

我该如何实现它？

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;
}

输出截图：