如果你想要使用 Highcharts 在整個畫面中展示折線圖,你可以使用以下的範例程式碼。請確保你已經引入 Highcharts 的相關庫。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts 折線圖示範</title>
<!-- 引入 Highcharts 庫 -->
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body style="margin: 0; padding: 0;">
<!-- 在這裡插入折線圖的容器 -->
<div id="chartContainer" style="width: 100%; height: 100vh;"></div>
<script>
// 在這裡設定折線圖的數據和其他選項
const chartOptions = {
chart: {
type: 'line'
},
title: {
text: '折線圖示範'
},
series: [{
name: '數據系列',
data: [1, 3, 2, 4, 5]
}]
};
// 初始化 Highcharts 圖表
Highcharts.chart('chartContainer', chartOptions);
</script>
</body>
</html>
這個範例中,<div id="chartContainer" style="width: 100%; height: 100vh;"></div>
是用來放置折線圖的容器,並且透過 style
屬性使其寬高佔滿整個畫面。你可以根據需要調整折線圖的數據和其他選項。