// Vancouver Population
var ctx = document.getElementById("lineChart");
var lineChart = new Chart(ctx, {
type:'line',
data: {
labels: ["2000", "2005", "2010", "2015", "2018"],
datasets: [{
label: 'Vancouver Population Data',
data: [195000,2093000,2278000,2485000,2597000],
borderColor: [
'rgba(255,99,132,1)'
],
backgroundColor:['rgba(255,200,200,0.3)'],
borderWidth: 1,
//borderDash:([3]),
pointBackgroundColor:"red",
pointBorderColor: "rgba(250,10,10,0.1)",
pointBorderWidth:"10",
pointStyle:"rectRounded",
pointHoverBackgroundColor:"rgba(255,0,0,0.5)",
pointHoverBorderColor: "rgba(255,255,100,0.7)",
pointHoverRadius:"10",
//showLine:false,
//steppedLine:"false"
}]
},
options: {
title:{
display:true,
text:"Populations in Vancouver",
fontSize:20,
fontColor:"rgba(20,20,20,1)"
},
legend:{
display:false,
position:'right',
labels:{
fontColor:'#000'
},
},
elements:{
line:{
tension:0, //disables bezier curves
}
},
scales: {
yAxes:[{
ticks: {
beginAtZero:true,
callback: function(value,index,values){
return value + " people"
}
}
}]
},
/*animation: {
duration:0, // general animation time
},*/
hover:{
animationDuration:0, // duration of animations when hovering an item
},
responsiveAnimationDuration:0, // animation duration after a resize
}
});
// Vancouver Precipitation
var ctx = document.getElementById("barChart");
var BarChart = new Chart(ctx, {
type:'bar',
data: {
labels:["May 2017", "June 2017", "July 2017", "Aug 2017","Sep 2017","Oct 2017","Nov 2017","Dec 2017","Jan 2018","Feb 2018","Mar 2018","Apr 2018","May 2018"],
datasets:[{
label:"Precipitation Data",
data:[102.2,46.4,1.8,5.0,29.4,114.8,197.0,170.6,249.4,105.8,111.8,134.8,1.4],
backgroundColor: [
'rgba(255,99,132,0.5)',
'rgba(155,130,32,0.5)',
'rgba(105,9,132,0.5)',
'rgba(15,130,202,0.5)',
'rgba(15,250,252,0.5)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,0.5)',
'rgba(55,15,52,0.5)',
'rgba(255,0,0,0.5)',
'rgba(25,59,52,0.5)',
'rgba(0,100,55,0.5)',
'rgba(200,111,199,0.5)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(155,130,32,1)',
'rgba(105,9,132,1)',
'rgba(15,130,202,1)',
'rgba(15,250,252,1)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,1)',
'rgba(55,15,52,1)',
'rgba(255,0,0,1)',
'rgba(25,59,52,1)',
'rgba(0,100,55,1)',
'rgba(200,111,199,1)',
],
borderWidth:"1",
pointHoverBackgroundColor:"#fff",
hoverBorderColor:"#fff",
}]
},
options: {
title:{
display:true,
text:"Vancouver Precipitation",
fontSize:20,
fontColor:"rgba(10,0,20,0.9)"
},
legend:{
display:false,
position:'right',
labels:{
fontColor:'#000'
}
},
scales:{
yAxes:[{
ticks:{
beginAtZero:true,
callback: function(value,index,values){
return value + " mm"
}
}
}]
}
},
});
// Ethnicity
var ctx = document.getElementById("pieChart");
var PieChart = new Chart(ctx,{
type:'pie',
data:{
labels:['European Candadian','Chinese','South Asia','Fillipino','Southeast Asian','Japanese','Latin American','Mixed visible minority','Korean','Aboriginal','West Asian','Black','Arab'],
datasets:[{
label:"Ethnicity",
data:[46.2,27.7,6,6,3,1.7,1.6,1.5,1.5,2,1.2,1,0.5],
backgroundColor: [
'rgba(255,99,132,0.5)',
'rgba(155,130,32,0.5)',
'rgba(105,9,132,0.5)',
'rgba(15,130,202,0.5)',
'rgba(15,250,252,0.5)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,0.5)',
'rgba(55,15,52,0.5)',
'rgba(255,0,0,0.5)',
'rgba(25,59,52,0.5)',
'rgba(0,100,55,0.5)',
'rgba(200,231,50,0.5)',
'rgba(155,22,30,0.5)',
],
borderColor:[
'rgba(255,99,132,0.5)',
'rgba(155,130,32,0.5)',
'rgba(105,9,132,0.5)',
'rgba(15,130,202,0.5)',
'rgba(15,250,252,0.5)',
'rgba(205,100,32,0.5)',
'rgba(0,205,0,0.5)',
'rgba(55,15,52,0.5)',
'rgba(255,0,0,0.5)',
'rgba(25,59,52,0.5)',
'rgba(0,100,55,0.5)',
'rgba(200,231,50,0.5)',
'rgba(155,22,30,0.5)',
],
borderWidth:[1]
}],
cutoutPercentage:[0]
},
options:{
title:{
display:true,
text:"Vancouver Ethnicity",
fontSize:"20",
fontColor:"rgba(20,20,20,1)"
},
}
});
// Radar
Chart.defaults.scale.ticks.beginAtZero = true;
var ctx = document.getElementById("radarChart");
var RadarChart = new Chart(ctx, {
type:'radar',
data:{
labels:['Hiking','Sporting Events','Stanley Park','Skiing & Snowboarding','Beaches','eating'],
datasets:[{
label:"Male",
data:['50','70','80','60','20','70'],
backgroundColor:[
'rgba(255,155,32,0.5)',
],
borderWidth:1,
pointBackgroundColor:["yellow","black","green","white","skyblue","red"],
pointHoverBackgroundColor:["black"],
pointStyle:["triangle"]
},
{
label:"Female",
data:['60','30','80','20','50','60'],
backgroundColor:[
'rgba(155,15,132,0.5)',
],
borderWidth:1,
pointBackgroundColor:["yellow","black","green","white","skyblue","red"],
pointHoverBackgroundColor:["black"],
pointStyle:["triangle"]
}
]
},
options:{
title:{
display:true,
text:"Activities in Vancouver",
fontSize:"20",
fontColor:"rgba(10,0,20,0.9)"
},
legend:{
display:false,
position:'right',
labels:{
fontColor:'#000',
}
},
scales:{
scale: {
}
}
}
});
// Select Options
var lineChart = document.getElementById("lineChart"),
barChart = document.getElementById("barChart"),
pieChart = document.getElementById("pieChart"),
radarChart = document.getElementById("radarChart");
function myFunction(){
var chartType = document.getElementById("chartType");
var i = chartType.selectedIndex;
if (chartType.options[i]) {
lineChart.style.display = "inherit";
}
} <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<div class="container">
<h1><span>V</span>ancouver Census</h1>
<!-- Vancouver Population -->
<select id="chartType" onchange="myFunction()">
<option value="line">Population</option>
<option value="bar">Precipitation</option>
<option value="pie">Ethnicity</option>
<option value="radar">Activity</option>
</select>
<div class="chart_container" id="display">
<canvas id="lineChart" style="display:none"></canvas>
<canvas id="barChart" style="display:none"></canvas>
<canvas id="pieChart" style="display:none"></canvas>
<canvas id="radarChart" style="display:none"></canvas>
</div>
</div>
我在这里想要实现的是当我选择＆＃34; population＆＃34;时，线条图显示出来。当我选择＆＃34;降水＆＃34;时，barChart出现了。 我知道我缺少某种逻辑功能。我尝试使用if语句if（chartType.options [0]）{lineChart.style.display =＆＃34; inherit＆＃34;}但它最终适用于所有选项。我很感激提示和帮助。
答案 0 :(得分：1)
根据我的评论：
为了做到这一点，你有两件事要做：找到当前正在显示的图表，然后隐藏它。
让我们先添加两个类：hidden-chart和active-chart及其CSS：
.hidden-chart { display: none !important; }
.active-chart { display: inherit !important; }
并相应地编辑HTML：
<canvas id="lineChart" class="hidden-chart"></canvas>
<canvas id="barChart" class="hidden-chart"></canvas>
<canvas id="pieChart" class="hidden-chart"></canvas>
<canvas id="radarChart" class="hidden-chart"></canvas>
好的，现在你可以有两种类型的图表：隐藏的图表包含hidden-chart类，当前显示的图表包含active-chart类。
为了实现1），您现在必须将以下代码添加到您的函数中：
function myFunction() {
const currentChart = document.querySelector("#display .active-chart");
if (currentChart) {
currentChart.classList.remove("active-chart"); // Remove the active-chart class
currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
}
var chartType = document.getElementById("chartType");
var i = chartType.selectedIndex;
if (chartType.options[i]) {
lineChart.style.display = "inherit";
}
}
在HTMLElement.text变量上，这是一个非常简单的switch：
function myFunction() {
const currentChart = document.querySelector("#display .active-chart");
if (currentChart) {
currentChart.classList.remove("active-chart"); // Remove the active-chart class
currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
}
var chartType = document.getElementById("chartType");
var i = chartType.selectedIndex;
const selectedOption = chartType.options[i]; // The option the user has clicked on
let toEnableChart;
switch (selectedOption.text) {
case 'Population':
toEnableChart = lineChart;
break;
case 'Precipitation':
toEnableChart = barChart;
break;
case 'Ethnicity':
toEnableChart = pieChart;
break;
case 'Activity':
toEnableChart = radarChart;
break;
}
if (chartType.options[i]) {
lineChart.style.display = "inherit";
}
}
您可以使用标准if替换开关if else else if else构造。
现在我们知道要显示什么图表（toEnableChart变量，感谢切换;我们知道如何显示它 - 还记得我们的隐藏图表和活动图表类吗？），它是＆＃39; s是时候展示它了！
function myFunction() {
const currentChart = document.querySelector("#display .active-chart");
if (currentChart) {
currentChart.classList.remove("active-chart"); // Remove the active-chart class
currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
}
var chartType = document.getElementById("chartType");
var i = chartType.selectedIndex;
const selectedOption = chartType.options[i]; // The option the user has clicked on
let toEnableChart;
switch (selectedOption.text) {
case 'Population':
toEnableChart = lineChart;
break;
case 'Precipitation':
toEnableChart = barChart;
break;
case 'Ethnicity':
toEnableChart = pieChart;
break;
case 'Activity':
toEnableChart = radarChart;
break;
}
if (toEnableChart) {
toEnableChart.classList.remove("hidden-chart");
toEnableChart.classList.add("active-chart");
}
您可能会注意到，显示新图表的步骤是第1步，但是向后显示。
如果不清楚，请随意发表评论。