多个ChartJS脚本不能同时工作

当我在ChartJS中使用单个图表时，它工作得很好，但每当我使用多个图表时，只有最后一个图表有效，其他图表不再显示。

我不确定问题到底是什么，因为我已经检查了控制台和终端，如果我得到任何错误，以便购买它。

index . html

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
# The Script for the first chart
<script>
// Driver Status
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [{{pending}},{{hired}},{{terminated}}],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
label: 'Population'
}],
labels: ['pending', 'hired', 'terminated']
},
options: {
responsive: true
}
};
window.onload = function() {
var ctx = document.getElementById('pie-chart').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
# The Script for the Second chart
<script>
// EVR STATUS
var config2 = {
type: 'doughnut',
data: {
datasets: [{
data: [{{done}},{{partial}},{{not_started}}],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
label: ['EVR Status']
}],
labels: ['done', 'partial', 'not_started']
},
options: {
responsive: true
}
};
window.onload = function() {
var ctx2 = document.getElementById('evr-status').getContext('2d');
window.myPie2 = new Chart(ctx2, config2);
};
</script>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<h5 class="text-muted">No of Drivers: {{drivers_list.count}}</h5>
<div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
<h1 class="fs-20">Driver Status</h1>
</div>
</div>
# THE FIRST CHART
<canvas id="pie-chart" style="margin-bottom: 20px!important;"></canvas>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<h5 class="text-muted">Driver</h5>
<div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
<h1 class="fs-20">EVR Status</h1>
</div>
</div>
# THE SECOND CHART
<canvas id="evr-status" style="margin-bottom: 20px!important;"></canvas>
</div>
</div>
{% endblock %}

问题似乎是两个onload函数。如果你在第二个onLoad函数中制作两个图表，它将工作。如果你把它变成一个单独的脚本标签，效果会更好。

<body>
<!--<canvas id="chartJSContainer" width="600" height="400"></canvas>-->

<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<h5 class="text-muted">No of Drivers:</h5>
<div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
<h1 class="fs-20">Driver Status</h1>
</div>
</div>
# THE FIRST CHART
<canvas id="pie-chart" style="margin-bottom: 20px!important;"></canvas>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<h5 class="text-muted">Driver</h5>
<div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
<h1 class="fs-20">EVR Status</h1>
</div>
</div>
# THE SECOND CHART
<canvas id="evr-status" style="margin-bottom: 20px!important;"></canvas>
</div>
</div>
<script>
// Driver Status
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
label: 'Population'
}],
labels: ['pending', 'hired', 'terminated']
},
options: {
responsive: true
}
};
</script>
# The Script for the Second chart
<script>
// EVR STATUS
var config2 = {
type: 'doughnut',
data: {
datasets: [{
data: [30, 20, 10],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
label: ['EVR Status']
}],
labels: ['done', 'partial', 'not_started']
},
options: {
responsive: true
}
};
window.onload = function() {
var ctx2 = document.getElementById('evr-status').getContext('2d');
window.myPie2 = new Chart(ctx2, config2);
var ctx = document.getElementById('pie-chart').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

相关内容

最新更新

热门标签：