grafico a ciambella JS / Jquery che consente i tag HTML nella sua etichetta?

Voglio un grafico ad anello, ma il problema è che non riesco a trovare quale libreria JS / Jquery là fuori possa darmi il risultato che voglio.

Ho provato ChartJS ma a quanto pare, non consente tag HTML né almeno interruzioni di riga nell’etichetta. E anche se sono riuscito ad aggiungere, sembra che l’etichetta sia anche responsabile della legenda del grafico Chart.js, quindi se aggiungo troppa stringa nell’etichetta la legenda sarà “rotta”. Voglio solo mostrare più informazioni nell’etichetta.

Non analizzando i tag HTML: inserisci la descrizione dell'immagine qui

var config1 = { type: 'doughnut', data : { labels: [ "Pass
" + "Move Test: 1
" + "Increment Test: 2
" + "Rewrite Test: 19", "Fail", ], datasets: [ { data: data: [22, 4], backgroundColor: [ "#1AFF00", "#FF0A0A", ], hoverBackgroundColor: [ "#20FF08", "#FF0000", ] }] }, options : { responsive: true, legend: { position: 'top', }, title: { display: true, text: 'All entries that Passed vs Fail from different tests' }, animation: { animateScale: true, animateRotate: true } } };

Ragazzi, conoscete qualche altra biblioteca che posso usare per questo? O se c’è un trucco che posso fare su Chart.js?

Grazie!

È ansible separare le etichette dalle legende fornendo un richiamo all’etichetta (nelle opzioni) e si può creare un’etichetta multipla di descrizioni comandi passando una serie di stringhe ( come da documentazione ).

 var ctx = document.getElementById("canvas"); var data = { type: 'doughnut', data: { labels: [ "Pass", "Fail", ], datasets: [ { data: [22, 4], backgroundColor: [ "#1AFF00", "#FF0A0A", ], hoverBackgroundColor: [ "#20FF08", "#FF0000", ] }] }, options : { responsive: true, legend: { position: 'top', }, title: { display: true, text: 'All entries that Passed vs Fail from different tests' }, animation: { animateScale: true, animateRotate: true }, tooltips: { callbacks: { label: function(tooltipItems, data) { if(data.labels[tooltipItems.index] == 'Pass') { return ['Pass','Move Test: 1','Increment Test: 2','Rewrite Test: 19']; } return data.labels[tooltipItems.index]; } } } } }; var theChart = new Chart(ctx, data);