Chart.js 2.0 Donut-Tooltip Prozentsätze

Ich habe mit chart.js 1.0 gearbeitet und hatte meine Tooltips für Donut-Diagramme, die Prozentsätze basierend auf Daten dividiert durch Dataset anzeigen, aber ich kann dies nicht mit Diagramm 2.0 replizieren.Chart.js 2.0 Donut-Tooltip Prozentsätze

Ich habe hoch und niedrig gesucht und habe keine funktionierende Lösung gefunden. Ich weiß, dass es unter Optionen gehen wird, aber alles, was ich versucht habe, hat den Kuchen im besten Fall dysfunktional gemacht.

<html> 

<head> 
    <title>Doughnut Chart</title> 
    <script src="../dist/Chart.bundle.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <style> 
    canvas { 
     -moz-user-select: none; 
     -webkit-user-select: none; 
     -ms-user-select: none; 
    } 
    </style> 
</head> 

<body> 
    <div id="canvas-holder" style="width:75%"> 
     <canvas id="chart-area" /> 
    </div> 
    <script> 
    var randomScalingFactor = function() { 
     return Math.round(Math.random() * 100); 
    }; 
    var randomColorFactor = function() { 
     return Math.round(Math.random() * 255); 
    }; 
    var randomColor = function(opacity) { 
     return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')'; 
    }; 

    var config = { 
     type: 'doughnut', 
     data: { 
      datasets: [{ 
       data: [ 
        486.5, 
        501.5, 
        139.3, 
        162, 
        263.7, 
       ], 
       backgroundColor: [ 
        "#F7464A", 
        "#46BFBD", 
        "#FDB45C", 
        "#949FB1", 
        "#4D5360", 
       ], 
       label: 'Expenditures' 
      }], 
      labels: [ 
       "Hospitals: $486.5 billion", 
       "Physicians & Professional Services: $501.5 billion", 
       "Long Term Care: $139.3 billion", 
       "Prescription Drugs: $162 billion", 
       "Other Expenditures: $263.7 billion" 
      ] 
     }, 
     options: { 
      responsive: true, 
      legend: { 
       position: 'bottom', 
      }, 
      title: { 
       display: false, 
       text: 'Chart.js Doughnut Chart' 
      }, 
      animation: { 
       animateScale: true, 
       animateRotate: true 
      } 

     } 
    }; 

    window.onload = function() { 
     var ctx = document.getElementById("chart-area").getContext("2d"); 
     window.myDoughnut = new Chart(ctx, config);{ 

     } 
    }; 


    </script> 
</body> 

</html>

Quelle

2016-05-16 wrennjb

In options Sie in einem tooltips Objekt passieren können

Ein Feld von tooltips (mehr kann an den chartjs docs gelesen werden), das gewünschte Ergebnis zu erhalten, ist ein callbacks Objekt mit einem label Feld. label wird eine Funktion sein, die den Tooltip-Eintrag, über den Sie sich bewegt haben, und die Daten, aus denen Ihr Graph besteht, aufnimmt. Geben Sie einfach eine Zeichenfolge, die Sie in der QuickInfo verwenden möchten, von dieser Funktion zurück. Hier

ist ein Beispiel dafür, wie dies aussehen kann

tooltips: { 
    callbacks: { 
    label: function(tooltipItem, data) { 
     //get the concerned dataset 
     var dataset = data.datasets[tooltipItem.datasetIndex]; 
     //calculate the total of this data set 
     var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) { 
     return previousValue + currentValue; 
     }); 
     //get the current items value 
     var currentValue = dataset.data[tooltipItem.index]; 
     //calculate the precentage based on the total and current item, also this does a rough rounding to give a whole number 
     var precentage = Math.floor(((currentValue/total) * 100)+0.5); 

     return precentage + "%"; 
    } 
    } 
}

und ein komplettes Beispiel mit den Daten, die Sie

bereitgestellt

fiddle

var randomScalingFactor = function() { 
 
    return Math.round(Math.random() * 100); 
 
}; 
 
var randomColorFactor = function() { 
 
    return Math.round(Math.random() * 255); 
 
}; 
 
var randomColor = function(opacity) { 
 
    return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')'; 
 
}; 
 

 
var config = { 
 
    type: 'doughnut', 
 
    data: { 
 
    datasets: [{ 
 
     data: [ 
 
     486.5, 
 
     501.5, 
 
     139.3, 
 
     162, 
 
     263.7, 
 
     ], 
 
     backgroundColor: [ 
 
     "#F7464A", 
 
     "#46BFBD", 
 
     "#FDB45C", 
 
     "#949FB1", 
 
     "#4D5360", 
 
     ], 
 
     label: 'Expenditures' 
 
    }], 
 
    labels: [ 
 
     "Hospitals: $486.5 billion", 
 
     "Physicians & Professional Services: $501.5 billion", 
 
     "Long Term Care: $139.3 billion", 
 
     "Prescription Drugs: $162 billion", 
 
     "Other Expenditures: $263.7 billion" 
 
    ] 
 
    }, 
 
    options: { 
 
    responsive: true, 
 
    legend: { 
 
     position: 'bottom', 
 
    }, 
 
    title: { 
 
     display: false, 
 
     text: 'Chart.js Doughnut Chart' 
 
    }, 
 
    animation: { 
 
     animateScale: true, 
 
     animateRotate: true 
 
    }, 
 
    tooltips: { 
 
     callbacks: { 
 
     label: function(tooltipItem, data) { 
 
     \t var dataset = data.datasets[tooltipItem.datasetIndex]; 
 
      var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) { 
 
      return previousValue + currentValue; 
 
      }); 
 
      var currentValue = dataset.data[tooltipItem.index]; 
 
      var precentage = Math.floor(((currentValue/total) * 100)+0.5);   
 
      return precentage + "%"; 
 
     } 
 
     } 
 
    } 
 
    } 
 
}; 
 

 

 
var ctx = document.getElementById("chart-area").getContext("2d"); 
 
window.myDoughnut = new Chart(ctx, config); { 
 

 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="canvas-holder" style="width:75%"> 
 
    <canvas id="chart-area" /> 
 
</div>

Quelle

2016-05-16 18:22:41 Quince

Können wir zeigen der Prozentsatz dynamisch in t er Legendentext? –

Wenn alle Antworten wie diese waren ... Gute Arbeit Alter –

Dies funktioniert nicht, wenn Sie Etiketten verstecken/scratchen. Gibt es eine Möglichkeit, den Prozentsatz basierend auf den nicht zerkratzten Etiketten zu berechnen? –

Antwort

Verwandte Themen