jQuery addClass example
Change class name on click in jQuery
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<canvas id="chart1" height="300" width="500"></canvas>
JavaScript
//資料標題
var labels = ['輕微', '普通', '嚴重', '崩潰'];
var total1 = 0;
var ctx = document.getElementById('chart1').getContext('2d');
var pieChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
//預設資料
data: [10, 20, 30, 40],
backgroundColor: [
//資料顏色
"#F0F8FF",
"#5599FF",
"#FFFF77",
"#FF8888"
],
}],
},
options: {
animation: {
animateScale: true,
animateRotate: true
},
// 關於滑過後的 顯示
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
//計算總和
var sum = dataset.data.reduce(function (previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
});
var currentValue = dataset.data[tooltipItem.index];
var percent = Math.round(((currentValue / sum) * 100));
return " " + data.labels[tooltipItem.index] + ":" + currentValue + " (" + percent + " %)";
}
}
},
//提示項目的處理
legend: {
display: true,
position: 'left',
labels: {
fontFamily: "微軟正黑體",
fontSize: 15,
fontColor: 'rgba(0,0,0,0.8)',
boxWidth: 15,
generateLabels: function (chart) {
var data = chart.data;
if (data.labels.length && data.datasets.length) {
return...