Taglio del grafico a torta Chart.js che si interrompe

Question

Sto usando il grafico a torta Chart.js con suggerimenti che vengono tagliati per qualche motivo.

screenshot allegato, non ha trovato alcun attributo/opzione per prendersi cura di esso ..

Esiste un modo per prendersi cura di esso?

Grazie!

Answer 1

Questo taglio non corretto è stato generato come numero 622 nel repository Github per ChartJS.

Questo è stato determinato da un bug (evidentemente questo bug non è stata ancora fissata)

https://github.com/nnnick/Chart.js/issues/622

In risposta a tale questione, Robert Turrall ha una soluzione che, dice, è un buon soluzione alternativa. Ecco la sua correzione proposto:

Sono sicuro che questo è dovuto al fatto che le descrizioni sono generati entro i confini della tela, rendendo difficile risolvere.

Ho avuto lo stesso problema sul mio grafico ad anello e risolto da attuare i suggerimenti personalizzati come da esempio sulla cartella campioni - ha lavorato in collaborazione con le mie impostazioni tooltip FontSize e modelli esistenti nel codice grafico di inizializzazione:

var myDoughnutChart = new Chart(donut).Doughnut(donutdata, { 
    tooltipFontSize: 10, 
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs", 
    percentageInnerCutout : 70 
}); 

Controlla campioni/pie-customTooltips.html per il codice del suggerimento personalizzato. Copia/incolla e ha funzionato subito. Molto felice!

Tooltip visualizzato ben al di fuori dei limiti della tela:

PS: c'è un esempio grafico a linee troppo, che sto cercando di indovinare funzionerà bene con grafici a barre.

Answer 2

Ho trovato una soluzione per questo. Ho etichette vuote sul mio asse x, quindi ho appena aggiunto un'etichetta con diversi spazi al suo interno per l'ultima etichetta. Ciò ha causato che ChartJS lasciasse spazio sufficiente per adattarsi all'etichetta, lasciando anche spazio sufficiente per il montaggio del tooltip.

Inoltre, ho grandi cerchi per i miei punti dati e l'ultimo a destra è stato tagliato in precedenza. Aggiungendo lo spazio extra all'etichetta è stato corretto anche quello.

Ecco il codice in cui creo le mie etichette. Il ratings è il mio dati effettivi definito in precedenza:

// Add blank labels and "Today" 
for (i=0; i<ratings.length; i++) { 
    labels.push(""); 
} 
labels[ratings.length-1] = "  "; 

var data = { 
    labels: labels, 
    datasets: [ 
     { 
      label: "Progress", 
      strokeColor: "rgba(255,165,0,1.0)", 
      pointColor: "white", 
      pointStrokeColor: "rgba(255,165,0,1.0)", 
      pointHighlightStroke: "#B87700", 
      data: ratings 
     } 
    ] 
}; 

Anche se si dispone di etichette reali sul grafico, è possibile aggiungere gli spazi per l'ultima etichetta per renderlo più grande. Se si centra l'etichetta, è possibile aggiungere la stessa quantità di spazio prima e dopo.

Ovviamente ci saranno dei limiti dove questo funzionerà o meno per voi, ma per il mio caso ho aggiunto 7 spazi e tutto sembra a posto ora.

Inoltre, il mio caso aveva un problema sul lato destro, mentre questa domanda ha un problema con il lato sinistro.La stessa soluzione dovrebbe funzionare, ma mettere lo spazio sulla prima etichetta.

Answer 3

È interessante notare che l'impostazione dell'opzione tooltipCaretSize su 0 risolve il problema.
{ tooltipCaretSize: 0, ... }

Answer 4

Nel mio caso, sono riuscito a risolvere questo problema riducendo la quantità di testo nel suggerimento. L'ho fatto utilizzando i richiami delle descrizioni comandi personalizzati per specificare il testo dell'etichetta. Il mio inizializzazione si presentava così:

var chart = new Chart(canvas.getContext("2d"), { 
    type: 'line', 
    data: chartData, 
    options: { 
     responsive: true, 
     tooltips: { 
      callbacks: { 
       title: function(tooltipItems, data) { 
        return tooltipItems[0].xLabel; 
       }, 
       label: function(tooltipItems, data) { 
        return tooltipItems.yLabel; 
       }, 
      } 
     }, 
    }, 
}); 

Sembra che ci sia una correzione disponibile che non è ancora integrato nel progetto: https://github.com/chartjs/Chart.js/pull/1064

Answer 5

Sembra Chart.js non può capire quale direzione mostra il suggerimento perché non è in grado di rilevare la dimensione dell'elemento tooltip quando estende oltre il dell'area di disegno.

Nel mio scenario ho riparato comprimendo il testo all'interno di questo particolare tooltip più stretto con queste opzioni per le opzioni tooltip oggetto:

 tooltips.titleMarginBottom = 1; 
     tooltips.bodySpacing = 1; 
     tooltips.yPadding = 2; 

wierdly abbastanza Chart.js poi decide correttamente per mostrare il tooltip verso sinistra del mouse e non sotto. Sarebbe bello se potessi scegliere in quale direzione appare la descrizione del comando rispetto al mouse.

Answer 6

È possibile aggiungere il riempimento interno al grafico. Per esempio nel mio caso ho avuto un taglio di suggerimenti sulla destra.

    options: { 
        responsive: true, 
        maintainAspectRatio: false, 
        cutoutPercentage: 60, 
        legend: { 
         display: false 
        }, 
        animation: { 
         animateRotate: false 
        }, 
        layout: { 
         padding: { 
          right: 40 
         } 
        } 
       }