网页中具备下拉菜单,通过下拉菜单切换显示不同的图表; 2、图表1:采用柱状图分别显示男性、女性的两组数据,每组数据显示生还和去世人数; 3、图表2:采用饼图分别显示男性、女性的两组数据,每组数据显示生还和去世的比例; 4、图表3:采用线状图分别显示1,2,3等舱的生还人员数量; 5、图表4:采用散点图显示1,2,3等舱与生还人员年龄的对应关系。
时间: 2023-05-26 12:06:42 浏览: 49
注:以下为参考代码,仅供参考,具体实现根据实际需求和技术能力进行调整。
1. 下拉菜单实现:
HTML部分:
```
<select id="chart-select">
<option value="chart1">男女生还情况柱状图</option>
<option value="chart2">男女生还情况饼图</option>
<option value="chart3">各舱生还人数线状图</option>
<option value="chart4">各舱与年龄散点图</option>
</select>
```
JavaScript部分:
```
var chartSelect = document.getElementById("chart-select");
var chart1 = document.getElementById("chart1");
var chart2 = document.getElementById("chart2");
var chart3 = document.getElementById("chart3");
var chart4 = document.getElementById("chart4");
chartSelect.onchange = function() {
if (chartSelect.value === "chart1") {
chart1.style.display = "block";
chart2.style.display = "none";
chart3.style.display = "none";
chart4.style.display = "none";
} else if (chartSelect.value === "chart2") {
chart1.style.display = "none";
chart2.style.display = "block";
chart3.style.display = "none";
chart4.style.display = "none";
} else if (chartSelect.value === "chart3") {
chart1.style.display = "none";
chart2.style.display = "none";
chart3.style.display = "block";
chart4.style.display = "none";
} else if (chartSelect.value === "chart4") {
chart1.style.display = "none";
chart2.style.display = "none";
chart3.style.display = "none";
chart4.style.display = "block";
}
}
```
2. 柱状图实现:
HTML部分:
```
<div id="chart1">
<canvas id="bar-chart"></canvas>
</div>
```
JavaScript部分:
```
var barChart = document.getElementById("bar-chart");
var data = {
labels: ["男性生还", "男性去世", "女性生还", "女性去世"],
datasets: [{
label: "生还/去世人数",
data: [maleSurvived, maleDied, femaleSurvived, femaleDied],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(255, 159, 64, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
var myBarChart = new Chart(barChart, {
type: 'bar',
data: data,
options: options
});
```
3. 饼图实现:
HTML部分:
```
<div id="chart2">
<canvas id="pie-chart"></canvas>
</div>
```
JavaScript部分:
```
var pieChart = document.getElementById("pie-chart");
var data = {
labels: ["男性生还", "男性去世", "女性生还", "女性去世"],
datasets: [{
data: [maleSurvived, maleDied, femaleSurvived, femaleDied],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(255, 159, 64, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
};
var myPieChart = new Chart(pieChart, {
type: 'pie',
data: data
});
```
4. 线状图实现:
HTML部分:
```
<div id="chart3">
<canvas id="line-chart"></canvas>
</div>
```
JavaScript部分:
```
var lineChart = document.getElementById("line-chart");
var data = {
labels: ["1等舱", "2等舱", "3等舱"],
datasets: [{
label: "生还人数",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [class1Survived, class2Survived, class3Survived],
spanGaps: false
}]
};
var myLineChart = new Chart(lineChart, {
type: 'line',
data: data
});
```
5. 散点图实现:
HTML部分:
```
<div id="chart4">
<canvas id="scatter-chart"></canvas>
</div>
```
JavaScript部分:
```
var scatterChart = document.getElementById("scatter-chart");
var data = {
datasets: [{
label: "1等舱",
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
data: class1AgeSurvived
}, {
label: "2等舱",
borderColor: 'rgba(54, 162, 235, 1)',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
data: class2AgeSurvived
}, {
label: "3等舱",
borderColor: 'rgba(255, 206, 86, 1)',
backgroundColor: 'rgba(255, 206, 86, 0.5)',
data: class3AgeSurvived
}]
};
var options = {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
beginAtZero: true
}
}]
}
};
var myScatterChart = new Chart(scatterChart, {
type: 'scatter',
data: data,
options: options
});
```