要实现都道府县区域默认颜色为灰色，同时特定值显示特定颜色（如值为1时为蓝色，值为2时为红色），可以继续使用 colorAxis 的 dataClasses 来实现。这里是更新后的代码：
html
コードをコピーする
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Map with Custom Region Colors</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/jp/jp-all.js"></script>
<style>
body {
font-family: "MS 明朝", serif; /* 设置全局字体为 MS 明朝 */
}
#container {
width: 100%;
overflow: hidden; /* 确保包含浮动元素 */
}
.legend-container {
float: left; /* 左浮动 */
width: 150px; /* 定义说明标签容器的宽度 */
text-align: left;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
font-family: "MS 明朝", serif; /* 设置说明标签的字体为 MS 明朝 */
font-size: 14px;
margin-right: 10px; /* 与地图容器的间距 */
}
.legend-item {
margin-bottom: 8px;
}
.legend-item span {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
vertical-align: middle;
}
.legend-item.blue span {
background-color: #0000FF; /* 蓝色 */
}
.legend-item.red span {
background-color: #FF0000; /* 红色 */
}
.legend-item.gray span {
background-color: #CCCCCC; /* 灰色 */
}
#map-container {
float: left; /* 左浮动 */
width: calc(100% - 170px); /* 减去说明标签容器的宽度和间距 */
}
</style>
</head>
<body>
<div id="container">
<div class="legend-container">
<div class="legend-item blue"><span></span> 值为 1 - 蓝色</div>
<div class="legend-item red"><span></span> 值为 2 - 红色</div>
<div class="legend-item gray"><span></span> 其他 - 灰色</div>
</div>
<div id="map-container"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
Highcharts.mapChart('map-container', {
chart: {
map: 'countries/jp/jp-all',
height: 600 // 设置地图的高度
},
title: {
text: '' // 设置为空字符串，不显示标题
},
credits: {
enabled: false // 禁用 Highcharts.com 版权信息显示
},
colorAxis: {
dataClasses: [{
from: 1,
to: 1,
color: '#0000FF', // 值为 1 时，颜色为蓝色
name: '值为 1'
}, {
from: 2,
to: 2,
color: '#FF0000', // 值为 2 时，颜色为红色
name: '值为 2'
}, {
from: 0,
to: 0,
color: '#CCCCCC', // 其他值时，颜色为灰色
name: '其他'
}]
},
plotOptions: {
map: {
borderColor: '#FFFFFF', // 设置边界线颜色为白色
borderWidth: 1 // 设置边界线宽度
}
},
series: [{
data: [
{ 'hc-key': 'jp-tk', value: 1 }, // 东京都，值为 1，蓝色
{ 'hc-key': 'jp-kn', value: 2 }, // 神奈川县，值为 2，红色
// 其他都道府县值为 0，不设定特定颜色
{ 'hc-key': 'jp-01', value: 0 },
{ 'hc-key': 'jp-02', value: 0 },
{ 'hc-key': 'jp-03', value: 0 },
{ 'hc-key': 'jp-04', value: 0 },
{ 'hc-key': 'jp-05', value: 0 },
{ 'hc-key': 'jp-06', value: 0 },
{ 'hc-key': 'jp-07', value: 0 },
{ 'hc-key': 'jp-08', value: 0 },
{ 'hc-key': 'jp-09', value: 0 },
{ 'hc-key': 'jp-10', value: 0 },
{ 'hc-key': 'jp-11', value: 0 },
{ 'hc-key': 'jp-12', value: 0 },
// 添加更多都道府县数据...
],
mapData: Highcharts.maps['countries/jp/jp-all'], // 使用日本地图数据
joinBy: 'hc-key', // 使用 'hc-key' 字段连接数据和地图
name: 'Data', // 系列名称
dataLabels: {
enabled: false // 禁用数据标签显示都道府县名称
}
}]
});
});
</script>
</body>
</html>
代码解释：
-
colorAxis.dataClasses:
from: 1, to: 1, color: '#0000FF': 设置值为 1 时的颜色为蓝色。from: 2, to: 2, color: '#FF0000': 设置值为 2 时的颜色为红色。from: 0, to: 0, color: '#CCCCCC': 设置其他值时的颜色为灰色。
-
series.nullColor:
- 删除
nullColor设置，因为所有值都会通过dataClasses设置颜色。
- 删除
通过这种方式，值为 1 的都道府县显示为蓝色，值为 2 的都道府县显示为红色，其他都道府县默认显示为灰色。
