HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Chart.js Multi Series Pie</title>
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link rel="stylesheet" type="text/css" href="http://lyear.itshubao.com/v4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://lyear.itshubao.com/v4/css/style.min.css">
</head>
<body>
<div class="chart-example">
<div class="tab-content">
<div class="chart-view"><canvas id="myChart"></canvas></div>
<div class="chart-actions mt-3"></div>
<ul class="nav nav-tabs mt-3">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#myChart-config" aria-selected="true">Config</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#myChart-setup" aria-selected="false">Setup</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active tab-pane-code" id="myChart-config">
<pre>
const config = {
type: 'pie',
data: data,
options: {
responsive: true,
plugins: {
legend: {
labels: {
generateLabels: function(chart) {
// Get the default label list
const original = Chart.overrides.pie.plugins.legend.labels.generateLabels;
const labelsOriginal = original.call(this, chart);
// Build an array of colors used in the datasets of the chart
let datasetColors = chart.data.datasets.map(function(e) {
return e.backgroundColor;
});
datasetColors = datasetColors.flat();
// Modify the color and hide state of each label
labelsOriginal.forEach(label => {
// There are twice as many labels as there are datasets. This converts the label index into the corresponding dataset index
label.datasetIndex = (label.index - label.index % 2) / 2;
// The hidden state must match the dataset's hidden state
label.hidden = !chart.isDatasetVisible(label.datasetIndex);
// Change the color to match the dataset
label.fillStyle = datasetColors[label.index];
});
return labelsOriginal;
}
},
onClick: function(mouseEvent, legendItem, legend) {
// toggle the visibility of the dataset from what it currently is
legend.chart.getDatasetMeta(
legendItem.datasetIndex
).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
legend.chart.update();
}
},
tooltip: {
callbacks: {
label: function(context) {
const labelIndex = (context.datasetIndex * 2) + context.dataIndex;
return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
}
}
}
}
},
};
</pre>
</div>
<div class="tab-pane fade tab-pane-code" id="myChart-setup">
<pre>
const DATA_COUNT = 5;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
const labels = Utils.months({count: 7});
const data = {
labels: ['Overall Yay', 'Overall Nay', 'Group A Yay', 'Group A Nay', 'Group B Yay', 'Group B Nay', 'Group C Yay', 'Group C Nay'],
datasets: [
{
backgroundColor: ['#AAA', '#777'],
data: [21, 79]
},
{
backgroundColor: ['hsl(0, 100%, 60%)', 'hsl(0, 100%, 35%)'],
data: [33, 67]
},
{
backgroundColor: ['hsl(100, 100%, 60%)', 'hsl(100, 100%, 35%)'],
data: [20, 80]
},
{
backgroundColor: ['hsl(180, 100%, 60%)', 'hsl(180, 100%, 35%)'],
data: [10, 90]
}
]
};
</pre>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://lyear.itshubao.com/v4/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/v4/js/popper.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/v4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.1.1/chart.umd.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/luxon/3.2.0/luxon.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com/chartjs/utils.js"></script>
</body>
</html>
JavaScript
const DATA_COUNT = 5;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
const labels = Utils.months({count: 7});
const data = {
labels: ['Overall Yay', 'Overall Nay', 'Group A Yay', 'Group A Nay', 'Group B Yay', 'Group B Nay', 'Group C Yay', 'Group C Nay'],
datasets: [
{
backgroundColor: ['#AAA', '#777'],
data: [21, 79]
},
{
backgroundColor: ['hsl(0, 100%, 60%)', 'hsl(0, 100%, 35%)'],
data: [33, 67]
},
{
backgroundColor: ['hsl(100, 100%, 60%)', 'hsl(100, 100%, 35%)'],
data: [20, 80]
},
{
backgroundColor: ['hsl(180, 100%, 60%)', 'hsl(180, 100%, 35%)'],
data: [10, 90]
}
]
};
const config = {
type: 'pie',
data: data,
options: {
responsive: true,
plugins: {
legend: {
labels: {
generateLabels: function(chart) {
// Get the default label list
const original = Chart.overrides.pie.plugins.legend.labels.generateLabels;
const labelsOriginal = original.call(this, chart);
// Build an array of colors used in the datasets of the chart
let datasetColors = chart.data.datasets.map(function(e) {
return e.backgroundColor;
});
datasetColors = datasetColors.flat();
// Modify the color and hide state of each label
labelsOriginal.forEach(label => {
// There are twice as many labels as there are datasets. This converts the label index into the corresponding dataset index
label.datasetIndex = (label.index - label.index % 2) / 2;
// The hidden state must match the dataset's hidden state
label.hidden = !chart.isDatasetVisible(label.datasetIndex);
// Change the color to match the dataset
label.fillStyle = datasetColors[label.index];
});
return labelsOriginal;
}
},
onClick: function(mouseEvent, legendItem, legend) {
// toggle the visibility of the dataset from what it currently is
legend.chart.getDatasetMeta(
legendItem.datasetIndex
).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
legend.chart.update();
}
},
tooltip: {
callbacks: {
label: function(context) {
const labelIndex = (context.datasetIndex * 2) + context.dataIndex;
return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
}
}
}
}
},
};
const ctx = document.getElementById('myChart');
const chart = new Chart(ctx, config);