我已经使用chart.js 1.0,并且我的甜甜圈图表工具提示基于数据分割的数据显示百分比,但是我无法用图表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() + ',' + (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>
解决方法
在选项中,您可以传入一个工具提示对象(更多可以在
chartjs docs读取)
一个工具提示字段,以获取您想要的结果,是一个带有标签字段的回调对象.标签将是一个功能,它接收您已经悬停的工具提示项目以及构成图形的数据.从这个函数返回一个字符串,你想要进入工具提示.
这是一个这样的例子
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 + "%";
}
}
}
并提供您提供的数据的完整示例
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() + ',' + (opacity || '.3') + ')';
};
var config = {
type: 'doughnut',data: {
datasets: [{
data: [
486.5,backgroundColor: [
"#F7464A",label: 'Expenditures'
}],labels: [
"Hospitals: $486.5 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) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var total = dataset.data.reduce(function(prevIoUsValue,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>
