2016-05-11 14 views
14

Sto tentando di utilizzare il grafico ad anello con più set di dati e utilizzare anche la funzione tooltipTemplate per personalizzare il test all'interno dei tooltip ma non funziona nulla. Questo ha funzionato nella versione precedente di Chart js ma non supporta più set di dati. Qualcuno può aiutare? Qui di seguito è il mio codice ..Come utilizzare il tooltipTemplate su Chart.JS 2.0

options: { 
    tooltips: { 
     tooltipTemplate: "<%if (label){%><%=value%><%} else {%> No data <%}%>", 
    }, 
} 
+4

Devi usare 'callbacks.label'. Vedi http://stackoverflow.com/questions/37158477/where-put-multitooltiptemplate-in-chat-js-v2-x per un esempio. – potatopeelings

risposta

22

Come potatopeelings ha accennato nei commenti, è necessario impostare una richiamata per il tooltip.

Ecco un esempio:

options: { 
    tooltips: { 
    callbacks: { 
     label: function(tooltipItem, data) { 
     var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other'; 
     var label = data.labels[tooltipItem.index]; 
     return datasetLabel + ': ' + label; 
     } 
    } 
    } 
} 

dal vivo demo

var ctx = document.getElementById("myChart"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ["Men", "Women", "Unknown"], 
 
     datasets: [{ 
 
      label: 'Sweden', 
 
      data: [60, 40, 20], 
 
      backgroundColor: ['rgba(158, 216, 202, 0.75)', 'rgba(255, 150, 162, 0.75)', 'rgba(160, 160, 160, 0.75)'] 
 
     }, { 
 
      label: 'Netherlands', 
 
      data: [40, 70, 10], 
 
      backgroundColor: ['rgba(158, 216, 202, 0.5)', 'rgba(255, 150, 162, 0.5)', 'rgba(160, 160, 160, 0.5)'] 
 
     }, { 
 
      data: [33, 33, 34], 
 
      backgroundColor: ['rgba(158, 216, 202, 0.25)', 'rgba(255, 150, 162, 0.25)', 'rgba(160, 160, 160, 0.25)'] 
 
     }] 
 
    }, 
 
    options: { 
 
     tooltips: { 
 
      callbacks: { 
 
       label: function(tooltipItem, data) { 
 
        var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other'; 
 
        var label = data.labels[tooltipItem.index]; 
 
        return datasetLabel + ': ' + label; 
 
       } 
 
      } 
 
     } 
 
    } 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script> 
 
<canvas id="myChart" width="400" height="200"></canvas>

+1

questo non risolve il problema principale – Machado

8

Il 1.x tooltipsTemplate Chart.js equivale a options.tooltips.callbacks.title in Chart.js 2.x :

var ctx = document.getElementById("myChart"); 
 

 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
    labels: [ 
 
     "Men", 
 
     "Women", 
 
     "Unknown" 
 
    ], 
 
    datasets: [{ 
 
     label: 'Sweden', 
 
     data: [60, 40, 20], 
 
     backgroundColor: [ 
 
     'rgba(158, 216, 202, 0.75)', 
 
     'rgba(255, 150, 162, 0.75)', 
 
     'rgba(160, 160, 160, 0.75)' 
 
     ] 
 
    }, { 
 
     label: 'Netherlands', 
 
     data: [40, 70, 10], 
 
     backgroundColor: [ 
 
     'rgba(158, 216, 202, 0.5)', 
 
     'rgba(255, 150, 162, 0.5)', 
 
     'rgba(160, 160, 160, 0.5)' 
 
     ] 
 
    }, { 
 
     data: [33, 33, 34], 
 
     backgroundColor: [ 
 
     'rgba(158, 216, 202, 0.25)', 
 
     'rgba(255, 150, 162, 0.25)', 
 
     'rgba(160, 160, 160, 0.25)' 
 
     ] 
 
    }] 
 
    }, 
 
    options: { 
 
    tooltips: { 
 
     callbacks: { 
 
     label: function(tooltipItem, data) { 
 
       return 'This value ' + tooltipItem.yLabel; 
 
     }, 
 
     title: function(tooltipItem, data) { 
 
      return 'The tooltip title ' + tooltipItem[0].xLabel; 
 
     } 
 
     } 
 
    } 
 
    } 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script> 
 

 
<canvas id="myChart" width="400" height="200"></canvas>

0

È necessario impostare options per tooltip mode-label per mostrare tooltip multipla

options: { 
    tooltips: { 
     mode : 'label' 
    } 
}