Dodanie etykiety do wykresu pączków w Chart.js pokazuje wszystkie wartości na każdym wykresie

Question

Używam Chart.js, aby narysować serię wykresów na mojej stronie i napisałem metodę pomocnika, aby łatwo narysować różne wykresy:

drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, midLabel) { 
    var ctx = ctxElement; 
    var data = { 
     labels: ctxDataLabels, 
     datasets: ctxDataSets 
    }; 

    Chart.pluginService.register({ 
     beforeDraw: function(chart) { 
      var width = chart.chart.width, 
       height = chart.chart.height, 
       ctx = chart.chart.ctx; 

      ctx.restore(); 
      var fontSize = (height/114).toFixed(2); 
      ctx.font = fontSize + "em sans-serif"; 
      ctx.textBaseline = "middle"; 

      var text = midLabel, 
       textX = Math.round((width - ctx.measureText(text).width)/2), 
       textY = height/2; 

      ctx.fillText(text, textX, textY); 
      ctx.save(); 
     } 
    }); 

    var chart = new Chart(ctx, { 
     type: ctxType, 
     data: data, 
     options: { 
      legend: { 
       display: false 
      }, 
      responsive: true 
     } 
    }); 
} 

Ostatni parametr metody drawChart() zawiera etykietę, która powinna zostać dodana na środku wykresu. Część Chart.pluginService.register to kod, który rysuje etykietę. Problem polega na tym, że gdy wykonuję metodę drawChart wiele razy (w moim przypadku trzy razy) i dostarczam etykietę każdego wykresu w metodach wykonania, wszystkie trzy etykiety są wyświetlane jeden na drugim na każdym wykresie. Muszę wyświetlić każdą etykietę na odpowiednim wykresie. Wszystkie pozostałe parametry są obsługiwane poprawnie, z wyjątkiem etykiety.

Jak to osiągnąć?

Answer 1

Prostym rozwiązaniem jest dodanie kolejnego parametru do funkcji w celu rozróżnienia wykresów od siebie nawzajem.

Wybrałem do tego celu identyfikator wykresu, aby upewnić się, że nie wpłynie on na kolejną.

Najpierw należy edytować trochę swoją funkcję:

// !! 
// Don't forget to change the prototype 
// !! 
function drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, midLabel, id) { 
    var ctx = ctxElement; 
    var data = { 
     labels: ctxDataLabels, 
     datasets: ctxDataSets 
    }; 

    Chart.pluginService.register({ 
     afterDraw: function(chart) { 
      // Makes sure you work on the wanted chart 
      if (chart.id != id) return; 

      // From here, it is the same as what you had 

      var width = chart.chart.width, 
       height = chart.chart.height, 
       ctx = chart.chart.ctx; 

      // ... 
     } 
    }); 

    // ... 
} 

Od teraz, gdy dzwonisz swoją funkcję, nie zapomnij o ID:

// ids need to be 0, 1, 2, 3 ... 
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, "Canvas 1", 0); 
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, "Canvas 2", 1); 
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, "Canvas 3", 2); 

---

You można zobaczyć w pełni działający przykład na this fiddle (z 3 wykresami), a tutaj jest podgląd: