Highcharts 提供了一個名為 theme 的選項，允許你定制圖表的整體外觀和風格。以下是如何使用 Highcharts 主題的基本步驟：
Highcharts.chart() 方法創建一個圖表實例。theme 選項來設置主題。下面是一個簡單的示例，展示了如何使用 Highcharts 主題：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
// 創建圖表實例
Highcharts.chart('container', {
// 設置圖表標題
title: {
text: 'Monthly Average Temperature'
},
// 設置 X 軸標簽
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
// 設置 Y 軸標簽
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
// 設置圖表數據
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}]
});
// 自定義主題
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'Arial, sans-serif'
}
},
title: {
style: {
color: '#4572A7'
}
},
xAxis: {
labels: {
style: {
color: '#808590'
}
},
title: {
style: {
textOutline: '1px solid #808590',
color: '#808590'
}
}
},
yAxis: {
labels: {
style: {
color: '#808590'
}
},
title: {
style: {
textOutline: '1px solid #808590',
color: '#808590'
}
}
},
legend: {
itemStyle: {
color: '#4572A7'
}
},
series: [{
color: '#C0C0C0'
}, {
color: '#87CEFA'
}]
});
</script>
</body>
</html>
在上面的示例中，我們首先創建了一個基本的 Highcharts 圖表，然后通過 Highcharts.setOptions() 方法來自定義主題。在自定義主題中，我們可以設置圖表、標題、軸、圖例等元素的樣式屬性，如字體、顏色、邊框等。
請注意，Highcharts.setOptions() 方法設置的樣式會應用到所有的圖表實例上，除非你在創建圖表實例時單獨設置了這些樣式。因此，如果你只想為特定的圖表實例設置主題，可以在創建圖表實例時傳遞 theme 選項，如下所示：
Highcharts.chart('container', {
chart: {
theme: {
// 自定義主題樣式
}
},
// 其他圖表配置選項
});
這樣，你就可以根據需要定制 Highcharts 應用的主題了。
