updateBarChart(selectedDimension)然后創建函式
如何創建一個條形圖，顯示與每個世界杯相關的數字維度之一：
- 平均出勤率
- 進球數
- 游戲數量
- 參加人數
實作條形圖，使其顯示selectedDimension引數中指定的維度。
然后條形圖根據下拉框的選擇更新它顯示的資料。
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" />
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<header>
<h1>Exploring FIFA World Cup Statistics</h1>
</header>
<div id="bar-chart" class="view">
<h2 class="">Bar Chart</h2>
<div id="plot-selector">
<label>Plot:</label>
<select id="dataset" onchange="chooseData()">
<option selected value="attendance">Attendance</option>
<option value="teams">Teams</option>
<option value="matches">Matches</option>
<option value="goals">Goals</option>
</select>
</div>
</div>
<div id="container" style="width:100%;max-width:900px;"></div>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("container", {
animationEnabled: true,
theme: "light1",
title: {
text: ""
},
axisY: {
title: "Attendance"
},
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "Years",
dataPoints: [
{ y: 32808, label: "1930" },
{ y: 21352, label: "1934" },
{ y: 20872, label: "1938" },
{ y: 47511, label: "1950" },
{ y: 29561, label: "1954" },
{ y: 23423, label: "1958" },
{ y: 27911, label: "1962" },
{ y: 48847, label: "1966" },
{ y: 50124, label: "1970" },
{ y: 49098, label: "1974" },
{ y: 40678, label: "1978" },
{ y: 40571, label: "1982" },
{ y: 46039, label: "1986" },
{ y: 48388, label: "1990" },
{ y: 68991, label: "1994" },
{ y: 43517, label: "1998" },
{ y: 42268, label: "2002" },
{ y: 52491, label: "2006" },
{ y: 49669, label: "2010" },
{ y: 52918, label: "2014" }
]
}]
});
chart.render();
}
</script>
</body>uj5u.com熱心網友回復：
讓你的 chooseData() 函式做這樣的事情：
if select value is attendance
var chart = new CanvasJS.Chart("container", {options_and_data_for_attendance});
else if select value is teams
var chart = new CanvasJS.Chart("container", {options_and_data_for_teams});
else if select value is matches
var chart = new CanvasJS.Chart("container", {options_and_data_for_matches});
else // select value is goals
var chart = new CanvasJS.Chart("container", {options_and_data_for_goals});
chart.render();
uj5u.com熱心網友回復：
如上所述，其中一種方法是更改??您的 ChooseData() 函式以在圖表之間切換，以及相應的下拉串列。
另一種方法是將所有資料集添加到不同的 Js 陣列中，并使用不同的下拉串列，將適當的陣列推送到資料點物件中，從而有效地在陣列之間切換，保持一個圖表。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/356444.html
標籤：javascript html css
上一篇：有條件地加載然后參考外部JS