Угловая метка набора данных charts.js

Я заполняю гистограмму. Я заполняю arry на ionViewWillEnter:

  ionViewWillEnter(){

    this.projectStakeholdersService.getProjectStakeholders(1).subscribe(
      data=>{
        this.stakeholders = data;
        ...
  }

У всех заинтересованных сторон есть много свойств, таких как имя, возраст, образование и т. Д. Эти заинтересованные стороны я показываю в отношении каждого из этих свойств, то есть заинтересованные стороны по уровням образования, заинтересованные стороны по возрастным группам.

Например график для образования это что-то вроде:

this.educationChart = new Chart(this.educationCanvas.nativeElement, {

  type: 'bar',
  data: {
    labels: ["Vocational", "Diploma", "Bachelor", "Masters", "Doctor"], 
    datasets: [{
      label: '# of Stakeholders',
      data: [this.voc, this.dpl, this.bcl, this.mst, this.doc], 
      backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 206, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
      'rgba(255,99,132,1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)',
      'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true,
          stepSize:1
        }
      }]
    }
  }

});

Когда я наведу курсор на панель, на экране появится сообщение "Количество заинтересованных сторон:3". Кроме того, я также хотел бы показать имена заинтересованных сторон, которые выполняют это условие.

Как я могу этого достичь?

0 ответов

Другие вопросы по тегам