Как поместить текст в точку данных, используя диаграмму JS? - PullRequest
Новая
       47

Как поместить текст в точку данных, используя диаграмму JS?

0 голосов
/ 29 ноября 2018

У меня такая ситуация: have this

Я хочу сделать это: want this

* «Текст» означает текст.

Мой код: 

    <script>
         var yLabels = {0: '', 4: 'Pessimo', 6: 'Trancamento', 8: 'Ruim', 14: 'Excelente', 12: 'Mobilidade Acadêmica', 10: 'Regular', 16: 'Sucesso', 2: 'Fracasso', 18: ''}

      var lineChartData = {
        labels: [, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, , , ,],
        datasets: [{
          data: [, , , , , , , , , , , , , , , , , , 6, , , , ],
          pointBackgroundColor: '#00bfff',
          borderColor: '#000',
          borderWidth: 1,
          fill: false,
          pointRadius: 15,
          pointHoverRadius: 15
        },{
          data: [, 10, 14, 10, 10, 10, 14, 10, 10, 10, 10, 14, 10, 8, 8, 8, 8, 6, 6, , , ,],
          pointBackgroundColor: '#ffce56',
          borderColor: '#000',
          fill: false,
          borderWidth: 1,
          pointRadius: 5,
          pointHoverRadius: 5
        },{
          data: [, , , , , , , , , , , , , , , , , , 6, , , 16, ],
          pointBackgroundColor: '#008000',
          borderColor: '#000',
          borderWidth: 1,
          fill: false,
          borderDash: [10,5],
          pointRadius: 5,
          pointHoverRadius: 5
        },{
          data: [, , , , , , , , , , , , , , , , , , 6, , , 2, ],
          pointBackgroundColor: '#8b0000',
          borderColor: '#000',
          borderWidth: 1,
          fill: false,
          borderDash: [10,5],
          pointRadius: 5,
          pointHoverRadius: 5
        }]
      }

      var lineChartOptions = {
        tooltips: {enabled: false},
        hover: {mode: null},
        elements: {line: {tension: 0}},
        legend: {display: false},
        scales: {
          xAxes: [{gridLines: {display: true}}], 
          yAxes: [{
            gridLines: {display: false}, 
            ticks: {
              min: 0, 
              max: 18, 
              callback: function(value, index, values) {
                return yLabels[value];
              }
            }
          }]
        },
        title: {display: true, text: 'Classificação do estudante ao longo dos semestres'}
      }

      var ctx = document.getElementById("myChart").getContext("2d");

      var myChart = new Chart(ctx, {type: 'line', data: lineChartData, options: lineChartOptions});
    </script>

Если у вас есть предложения по поводу моего кода, пожалуйста, измените что хотите.Я новичок в html и js.

...