如何使用图表js将文本放入数据点?

时间:2018-11-29 13:51:45

标签: text label chart.js

我有这种情况: have this

我想这样做: want this

*“ Texto”表示文本。

我的代码是:

    <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的新手。

0 个答案:

没有答案