这是我的基于高图插件的高图，我想根据值在每个区域添加颜色，例如，如果值介于0到100之间，如果值介于100到200之间，颜色将再次变为绿色将为蓝色如果值在200到300之间，则颜色将再次变为黄色，如果值在300到400之间，则颜色将为红色。 以下是我的HTML代码
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$.getJSON('http://localhost/highcharts/highmaps/sample.json', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.code = this.code.toUpperCase();
});
// Instantiate the map
Highcharts.mapChart('container', {
chart: {
map: 'countries/us/us-all',
borderWidth: 1
},
title: {
text: 'US population density (/km²)'
},
exporting: {
sourceWidth: 600,
sourceHeight: 500
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
series: [{
animation: {
duration: 1000
},
data: data,
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}'
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
}]
});
});
</script>
</body>
</html>
[
{
"value": 438,
"code": "nj"
},
{
"value": 387.35,
"code": "ri",
"color":"blue"
},
{
"value": 312.68,
"code": "ma"
},
{
"value": 271.4,
"code": "ct"
},
{
"value": 209.23,
"code": "md"
},
{
"value": 195.18,
"code": "ny"
},
{
"value": 154.87,
"code": "de"
},
{
"value": 114.43,
"code": "fl"
},
{
"value": 107.05,
"code": "oh"
}
]
答案 0 :(得分：0)
我得到了答案，
我们需要添加脚本
Highcharts.setOptions({
lang: {
thousandsSep: ''
}
});
colorAxis: {
dataClasses: [{
to: 500,
color: "green"
}, {
from: 500,
to: 1000,
color: "blue"
}, {
from: 1000,
to: 2500,
color: "yellow"
}, {
from: 2500,
to: 5000,
color: "red"
}]
},