这是我的JSFiddle：https://jsfiddle.net/rce0469b/
高位图上唯一显示的颜色是系列的最后一种颜色。将显示数据标签，并且当您仅将鼠标悬停在数据标签上时，会显示悬停数据，但不会显示整个状态。颜色也没有出现。
我注意到除了系列中的最后一个数据之外的所有数据都发生了这种情况。单击图例点时，可以将其隐藏并显示颜色。
我想念什么？
我尝试在配置中添加很多内容，但似乎没有任何效果。我什至尝试过对数据进行重新排序，但是我正在使用细枝输出这些数据，因此很难进行太多操作。
Highcharts.mapChart("map_11045", {
chart: {
map: "countries/us/custom/us-all-territories",
borderWidth: 1
},
title: {
text: ""
},
colors: ["#AAD7E2", "#79A8A2", "#C9AFDB", "#A0D8A0", "#E8A6B1", "#F4E992", "#E8B091", "#94B3E0", "#C0C4C3", "#CCB2A8"],
exporting: {
sourceWidth: 600,
sourceHeight: 500
},
mapNavigation: {
enabled: true
},
plotOptions: {
series: {
cursor: "pointer",
point: {
events: {
click: function() {}
}
}
},
map: {
allAreas: true,
colorAxis: true,
joinBy: ["hc-key", "code"],
}
},
series: [{
legendIndex: 1,
visible: true,
type: "map",
name: "Using QUICK Financial and Case Activities Modules",
showInLegend: true,
dataLabels: {
enabled: true,
color: "#000000",
format: "{point.acronym}"
},
tooltip: {
headerFormat: "",
pointFormat: "{point.state_name} - {point.hover_data}",
useHTML: true
},
data: [{
code: "us-al",
acronym: "AL",
state_name: "Alabama",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "us-ar",
acronym: "AR",
state_name: "Arkansas",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-ca",
acronym: "CA",
state_name: "California",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "us-co",
acronym: "CO",
state_name: "Colorado",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-de",
acronym: "DE",
state_name: "Delaware",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-fl",
acronym: "FL",
state_name: "Florida",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-id",
acronym: "ID",
state_name: "Idaho",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-il",
acronym: "IL",
state_name: "Illinois",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-in",
acronym: "IN",
state_name: "Indiana",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-ia",
acronym: "IA",
state_name: "Iowa",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-ks",
acronym: "KS",
state_name: "Kansas",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-ky",
acronym: "KY",
state_name: "Kentucky",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "us-la",
acronym: "LA",
state_name: "Louisiana",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-me",
acronym: "ME",
state_name: "Maine",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "us-md",
acronym: "MD",
state_name: "Maryland",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-ma",
acronym: "MA",
state_name: "Massachusetts",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-mi",
acronym: "MI",
state_name: "Michigan",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-mn",
acronym: "MN",
state_name: "Minnesota",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "us-mo",
acronym: "MO",
state_name: "Missouri",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "us-ne",
acronym: "NE",
state_name: "Nebraska",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-nv",
acronym: "NV",
state_name: "Nevada",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-nh",
acronym: "NH",
state_name: "New Hampshire",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "us-nj",
acronym: "NJ",
state_name: "New Jersey",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-nm",
acronym: "NM",
state_name: "New Mexico",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-oh",
acronym: "OH",
state_name: "Ohio",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-ok",
acronym: "OK",
state_name: "Oklahoma",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-or",
acronym: "OR",
state_name: "Oregon",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-sd",
acronym: "SD",
state_name: "South Dakota",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "us-tn",
acronym: "TN",
state_name: "Tennessee",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-ut",
acronym: "UT",
state_name: "Utah",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-va",
acronym: "VA",
state_name: "Virginia",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "pr-3614",
acronym: "PR",
state_name: "Puerto Rico",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, {
code: "gu-3605",
acronym: "GU",
state_name: "Guam",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020and\u0020Case\u0020Activities\u0020Modules\u003C\/p\u003E\n",
link_url: ""
}, ]
}, {
legendIndex: 2,
visible: true,
type: "map",
name: "Using QUICK Financial Module",
showInLegend: true,
dataLabels: {
enabled: true,
color: "#000000",
format: "{point.acronym}"
},
tooltip: {
headerFormat: "",
pointFormat: "{point.state_name} - {point.hover_data}",
useHTML: true
},
data: [{
code: "us-az",
acronym: "AZ",
state_name: "Arizona",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-ct",
acronym: "CT",
state_name: "Connecticut",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-dc",
acronym: "DC",
state_name: "District Of Columbia",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "us-ga",
acronym: "GA",
state_name: "Georgia",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-ms",
acronym: "MS",
state_name: "Mississippi",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-ny",
acronym: "NY",
state_name: "New York",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-nc",
acronym: "NC",
state_name: "North Carolina",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-nd",
acronym: "ND",
state_name: "North Dakota",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-pa",
acronym: "PA",
state_name: "Pennsylvania",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-vt",
acronym: "VT",
state_name: "Vermont",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-wa",
acronym: "WA",
state_name: "Washington",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-wv",
acronym: "WV",
state_name: "West Virginia",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "us-wi",
acronym: "WI",
state_name: "Wisconsin",
hover_data: "\u003Cp\u003EUsing\u0020QUICK\u0020Financial\u0020Module\u003C\/p\u003E\n",
link_url: ""
}, ]
}, {
legendIndex: 3,
visible: true,
type: "map",
name: "Developing QUICK Financial Module and Case Activities Modules",
showInLegend: true,
dataLabels: {
enabled: true,
color: "#000000",
format: "{point.acronym}"
},
tooltip: {
headerFormat: "",
pointFormat: "{point.state_name} - {point.hover_data}",
useHTML: true
},
data: [{
code: "none"
}]
}, {
legendIndex: 4,
visible: true,
type: "map",
name: "Developing QUICK Financial Module (none)",
showInLegend: true,
dataLabels: {
enabled: true,
color: "#000000",
format: "{point.acronym}"
},
tooltip: {
headerFormat: "",
pointFormat: "{point.state_name} - {point.hover_data}",
useHTML: true
},
data: [{
code: "none"
}]
}, {
legendIndex: 5,
visible: true,
type: "map",
name: "Developing QUICK and viewing other states’ data",
showInLegend: true,
dataLabels: {
enabled: true,
color: "#000000",
format: "{point.acronym}"
},
tooltip: {
headerFormat: "",
pointFormat: "{point.state_name} - {point.hover_data}",
useHTML: true
},
data: [{
code: "none"
}]
}, {
legendIndex: 6,
visible: true,
type: "map",
name: "Not Using QUICK",
showInLegend: true,
dataLabels: {
enabled: true,
color: "#000000",
format: "{point.acronym}"
},
tooltip: {
headerFormat: "",
pointFormat: "{point.state_name} - {point.hover_data}",
useHTML: true
},
data: [{
code: "us-ak",
acronym: "AK",
state_name: "Alaska",
hover_data: "\u003Cp\u003ENot\u0020Using\u0020QUICK\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "us-hi",
acronym: "HI",
state_name: "Hawaii",
hover_data: "\u003Cp\u003ENot\u0020Using\u0020QUICK\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-mt",
acronym: "MT",
state_name: "Montana",
hover_data: "\u003Cp\u003ENot\u0020Using\u0020QUICK\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-ri",
acronym: "RI",
state_name: "Rhode Island",
hover_data: "\u003Cp\u003ENot\u0020Using\u0020QUICK\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-sc",
acronym: "SC",
state_name: "South Carolina",
hover_data: "\u003Cp\u003ENot\u0020Using\u0020QUICK\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-wy",
acronym: "WY",
state_name: "Wyoming",
hover_data: "\u003Cp\u003ENot\u0020Using\u0020QUICK\u003C\/p\u003E\n",
link_url: ""
}, {
code: "vi-6399",
acronym: "VI",
state_name: "Virgin Islands",
hover_data: "\u003Cp\u003ENot\u0020Using\u0020QUICK\u003C\/p\u003E\n",
link_url: ""
}, ]
}, {
legendIndex: 7,
visible: true,
type: "map",
name: "No Child Support Program",
showInLegend: true,
dataLabels: {
enabled: true,
color: "#000000",
format: "{point.acronym}"
},
tooltip: {
headerFormat: "",
pointFormat: "{point.state_name} - {point.hover_data}",
useHTML: true
},
data: [{
code: "us-tx",
acronym: "TX",
state_name: "Texas",
hover_data: "\u003Cp\u003ENo\u0020Child\u0020Support\u0020Program\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "as-6514",
acronym: "AS",
state_name: "American Samoa",
hover_data: "\u003Cp\u003ENo\u0020Child\u0020Support\u0020Program\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "as-6515",
acronym: "AS",
state_name: "American Samoa",
hover_data: "\u003Cp\u003ENo\u0020Child\u0020Support\u0020Program\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "mp-sa",
acronym: "MP",
state_name: "Commonwealth of the Northern Mariana Islands",
hover_data: "\u003Cp\u003ENo\u0020Child\u0020Support\u0020Program\u003C\/p\u003E\r\n",
link_url: ""
}, {
code: "us-fm",
acronym: "FM",
state_name: "Federated States of Micronesia",
hover_data: "\u003Cp\u003ENo\u0020Child\u0020Support\u0020Program\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-mh",
acronym: "MH",
state_name: "Republic of the Marshall Islands",
hover_data: "\u003Cp\u003ENo\u0020Child\u0020Support\u0020Program\u003C\/p\u003E\n",
link_url: ""
}, {
code: "us-pw",
acronym: "PW",
state_name: "Republic of Palau",
hover_data: "\u003Cp\u003ENo\u0020Child\u0020Support\u0020Program\u003C\/p\u003E\r\n",
link_url: ""
}, ]
}, {
name: "Separators",
type: "mapline",
data: Highcharts.geojson(Highcharts.maps["countries/us/custom/us-all-territories"], "mapline"),
color: "#111111",
showInLegend: false,
enableMouseTracking: false
}]
});
答案 0 :(得分：3)
您正在将plotOptions.map.allAreas设置为true，这意味着将为每个系列渲染所有区域。因此，仅显示最上面的最后一个系列。其他颜色隐藏在下面。
三种可能的解决方案：
设置allAreas: false。参见this example。
设置nullColor，可能有或没有nullInteraction。您可以执行nullColor: 'rgba(255, 255, 255, 0)'。参见this example。
有一个背景系列，其中有allAreas: true，而顶部的其他背景系列有allAreas: false。有关详细信息，请参见this example或this answer。