【发布时间】：2021-08-01 05:53:35
【问题描述】：
我在下面有这段代码 sn-p，它基本上在 3 个画布之间交替，用户应该选择要显示的图表，并且它工作正常，如您所见（尝试在从线到条形到雷达和它将显示所选图表并隐藏其他图表） 我想做一些修改，当页面加载时我只想显示一个图表（折线图），然后应该发生同样的事情，如果你想更改为另一种类型的图表然后使用选择框这样做。 问题是，当我将“隐藏”添加到条形图和雷达图时，整个事情停止工作，并且通过从选择框中选择它不起作用，知道如何在开始时只显示折线图而不损害我做的整个过程？ 谢谢
function updateChartType() {
var all_types = ["turn_over_line", "turn_over_bar", "turn_over_radar"];
var current_shown =document.getElementById("chartType").value;
for( var i = 0; i < all_types.length; i++) {
if (all_types[i] != current_shown) {
if (document.getElementById(all_types[i]).style.display!="none")
{
document.getElementById(all_types[i]).style.display="none";
}
}
else {
if (document.getElementById(all_types[i]).style.display!="block")
{
document.getElementById(all_types[i]).style.display="block";
}}
}
}.cann {
border: 3px solid darkgrey;
padding: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
width: 650px;
height: 250px;
margin-left: 3em;
} <!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- semantic UI -->
<link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
<!--Chart js-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"> </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
// Turn over line chart
$(document).ready(function (){
var ctx = document.getElementById('turn_over_line');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}, {
data: [282,350,411,502,635,809,947,1402,3700,5267],
label: "Asia",
borderColor: "#8e5ea2",
fill: false
}, {
data: [168,170,178,190,203,276,408,547,675,734],
label: "Europe",
borderColor: "#3cba9f",
fill: false
}, {
data: [40,20,10,16,24,38,74,167,508,784],
label: "Latin America",
borderColor: "#e8c3b9",
fill: false
}, {
data: [6,3,2,2,7,26,82,172,312,433],
label: "North America",
borderColor: "#c45850",
fill: false
}
]
},
options: {
animation: {
duration : 700,
easing : 'easeInOutSine',
},
title: {
display: true,
text: 'Turn over per site'
},
responsive : false,
}
} );
});
// Turn over bar chart
$(document).ready(function (){
var ctx = document.getElementById('turn_over_bar');
var myChart = new Chart(ctx, {
"type": "bar",
"data": {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
"options": {
title: {
display: true,
text: 'Turn over per site'
},
responsive : false,
"scales": {
"yAxes": [{
"id": "stacked_testY",
"type": 'linear',
"position": "left",
"stacked": true,
"display": true
}],
"xAxes": [{
"position": "bottom",
"stacked": true,
"display": true
}]
}
}
} );
});
//Turn over radar
$(document).ready(function (){
var ctx = document.getElementById('turn_over_radar');
var myChart = new Chart(ctx, {
"type": "radar",
"data": {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "1950",
fill: true,
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointBackgroundColor: "rgba(179,181,198,1)",
data: [8.77,55.61,21.69,6.62,6.82]
}, {
label: "2050",
fill: true,
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
data: [25.48,54.16,7.61,8.06,4.45]
}
]
},
"options": {
title: {
display: true,
text: 'Turn over per site'
},
responsive : false,
}
} );
});
</script>
<div>
<select class="chart_types" name="chartType" id="chartType" onchange="updateChartType()">
<option value="turn_over_line">Line</option>
<option value="turn_over_bar">Bar</option>
<option value="turn_over_radar">Radar</option>
</select>
<br><br>
<canvas id="turn_over_line" class="cann"></canvas>
<canvas id="turn_over_bar" class="cann" > </canvas>
<canvas id="turn_over_radar" class="cann" > </canvas>
</div>【问题讨论】：
标签： javascript html django chart.js