Chart.js 2.0甜甜圈提示百分比

我已經與chart.js 1.0一起工作，並有我的甜甜圈圖工具提示顯示基於數據除以數據集的百分比，但我無法複製這與圖表2.0。Chart.js 2.0甜甜圈提示百分比

我搜索了高和低，還沒有找到一個工作解決方案。我知道它會根據選項進行調整，但我嘗試過的所有方面都使得這個餡餅功能失靈。

<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>

來源

2016-05-16 wrennjb

在options您可以在tooltips對象（更可以在chartjs docs讀取）

的tooltips場傳球，得到你想要的結果，是一個callbacks對象與label場。 label將是一個函數，它接受您懸停的工具提示項和組成圖形的數據。從這個函數返回一個字符串，即你想要進入的工具提示。

這裏是什麼這個可以像

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 + "%"; 
    } 
    } 
}

，並與您所提供

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>

來源

2016-05-16 18:22:41 Quince

就可以顯示數據的完整的例子爲例在t中動態的百分比他的傳奇文字？ –

如果每個答案都是這樣的......好工作夥計 –

當你隱藏/劃傷標籤時，這不起作用。有沒有一種方法可以基於沒有劃痕的標籤來計算％？ –

Chart.js 2.0甜甜圈提示百分比

回答

相關問題