Пользовательская подсказка в Chart.js

Question

Я пытаюсь отобразить пользовательские подсказки с помощью Chart.js в зависимости от классификации данных.
я хочу показать:
1: Tooltip1
2: Tooltip2
3: Tooltip2
Ниже приводится код.

<script type="text/javascript" language="javascript"> 
    var pieData = [ 
      { 
       value: parseInt(document.getElementById("<%= txtPendingCount.ClientID %>").value, 0), 
       color: "#f5170a",     
       highlight: "#f85248", 
       label: "1" 
      }, 
      { 
       value: parseInt(document.getElementById("<%= txtCompletedCount.ClientID %>").value, 0),     
       color: "#ce5e0c",     
       highlight: "#cf7d40", 
       label: "2" 
      }, 
      { 
       value: parseInt(document.getElementById("<%= txtWithheldCount.ClientID %>").value, 0), 
       color: "#f4cd0c",     
       highlight: "#f7de62", 
       label: "3" 
      } 
    ]; 

    window.onload = function() { 
     var ctx = document.getElementById("chart-area").getContext("2d");      
     window.myPie = new Chart(ctx).Pie(pieData); 
    }; 
</script> 

Может кто-нибудь предложить, как это сделать?

Спасибо.

Answer 1

В примере вы можете увидеть, как это сделать, вы можете заметить, что я использую doughut, но та же идея, чтобы сделать это с помощью круговой диаграммы:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<canvas id="chart-area" style="display:inline;"></canvas> 
 

 
<script> 
 
    var doughnutData = [ 
 
     { 
 
     value: 200, 
 
     color: "#FFF", 
 
     label:"White", 
 
     }, 
 
     { 
 
     value: 200, 
 
     color: "#bb2028", 
 
     label:"Red", 
 
     },   
 
     { 
 
     value: 80, 
 
     color: "#d97128" , 
 
     label:"Orange", 
 
     }, 
 
     { 
 
     value: 40, 
 
     color: "#fada09", 
 
     label:"Yellow", 
 
     }, 
 
     { 
 
     value: 100, 
 
     color: "#6bb345",   
 
     label:"Light Green", 
 
     }, 
 
     { 
 
     value: 60, 
 
     color: "#b4aea7", 
 
     label:"Gray", 
 
     }, 
 
     { 
 
     value: 200, 
 
     color:"#2d5f2e", 
 
     fillColor:"#2d5f2e", 
 
     label:"Green", 
 
     } 
 
    ]; 
 

 
    window.onload = function(){ 
 
     var helpers = Chart.helpers; 
 
     var canvas= document.getElementById("chart-area"); 
 
     var ctx = canvas.getContext("2d"); 
 
     var globalChartConfig = { 
 
     responsive : true, 
 
     tooltipTemplate: "<%if (label){%>Label Color: <%=label%>: <%}%> <%= value %>", 
 
     } 
 
     
 
     window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, globalChartConfig);  
 
        
 
    }; 
 
    </script>