1
ハイチャートマップには小さな問題があります。私はそれが私が望むデータをプロットすることができたし、セレクタも含めてユーザーがどのデータシリーズが表示されるかを調整できるようにしました。しかし、ある特定のシリーズを1回レンダリングした後、Mapはデータを持たない米国領土の各シリーズにデータオブジェクトを追加しているようです。私の最も大きなシリーズは53のデータオブジェクト（米国、DC、プエルトリコ、バージン諸島）を持っていますが、データがないもの（セントジョン、サイパンなど） 。これは、私がこのマップで必要とされるhcキー形式に状態コードを変更するために使用するコードのスニペットに問題を引き起こしています。私はその機能にいくつかの追加のチェックを追加することができますが、Highchartsがデータ構造にデータを追加する理由を理解したいと思います。どんな助けでも大歓迎です。私のJavascriptのコードは以下の通りです：ハイチャートで不要なデータが追加される
mapData: Highcharts.maps['countries/us/custom/us-all-territories'],
たち - すべての地域が、あなたが述べたように、あなたが持っていない：
<script type="text/javascript">
var states ={resStates: [{code: "AK",value:3},{code: "AL",value:49},{code: "AR",value:9},{code: "AZ",value:28},{code: "CA",value:170},{code: "CO",value:26},{code: "CT",value:12},{code: "DC",value:10},{code: "DE",value:5},{code: "FL",value:126},{code: "GA",value:51},{code: "HI",value:7},{code: "IA",value:5},{code: "ID",value:13},{code: "IL",value:31},{code: "IN",value:28},{code: "KS",value:15},{code: "KY",value:12},{code: "LA",value:17},{code: "MA",value:54},{code: "MD",value:124},{code: "ME",value:13},{code: "MI",value:60},{code: "MN",value:8},{code: "MO",value:19},{code: "MS",value:16},{code: "MT",value:6},{code: "NC",value:43},{code: "ND",value:3},{code: "NE",value:10},{code: "NH",value:14},{code: "NJ",value:72},{code: "NM",value:35},{code: "NV",value:7},{code: "NY",value:70},{code: "OH",value:84},{code: "OK",value:23},{code: "OR",value:11},{code: "PA",value:101},{code: "PR",value:2},{code: "RI",value:20},{code: "SC",value:26},{code: "SD",value:5},{code: "TN",value:19},{code: "TX",value:91},{code: "UT",value:67},{code: "VA",value:112},{code: "VI",value:1},{code: "VT",value:1},{code: "WA",value:29},{code: "WI",value:13},{code: "WV",value:2},{code: "WY",value:4}],
acadStates: [{code: "AK",value:1},{code: "AL",value:47},{code: "AR",value:12},{code: "AZ",value:31},{code: "CA",value:163},{code: "CO",value:34},{code: "CT",value:9},{code: "DC",value:18},{code: "DE",value:7},{code: "FL",value:121},{code: "GA",value:80},{code: "HI",value:6},{code: "IA",value:9},{code: "ID",value:9},{code: "IL",value:29},{code: "IN",value:55},{code: "KS",value:16},{code: "KY",value:8},{code: "LA",value:14},{code: "MA",value:65},{code: "MD",value:81},{code: "ME",value:8},{code: "MI",value:66},{code: "MN",value:7},{code: "MO",value:20},{code: "MS",value:13},{code: "MT",value:4},{code: "NB",value:1},{code: "NC",value:53},{code: "ND",value:4},{code: "NE",value:8},{code: "NH",value:13},{code: "NJ",value:32},{code: "NM",value:32},{code: "NV",value:4},{code: "NY",value:93},{code: "OH",value:83},{code: "OK",value:25},{code: "OR",value:7},{code: "PA",value:123},{code: "PR",value:2},{code: "RI",value:15},{code: "SC",value:17},{code: "SD",value:4},{code: "TN",value:9},{code: "TX",value:103},{code: "UT",value:62},{code: "VA",value:114},{code: "VT",value:2},{code: "WA",value:27},{code: "WI",value:19},{code: "WV",value:4},{code: "WY",value:4}],
empStates: [{code: "AK",value:2},{code: "AL",value:71},{code: "AR",value:4},{code: "AZ",value:12},{code: "CA",value:235},{code: "CO",value:1},{code: "DC",value:36},{code: "FL",value:104},{code: "GA",value:70},{code: "HI",value:5},{code: "IL",value:17},{code: "IN",value:18},{code: "KS",value:14},{code: "LA",value:5},{code: "MA",value:61},{code: "MD",value:244},{code: "MI",value:39},{code: "MN",value:3},{code: "MO",value:4},{code: "MS",value:64},{code: "NC",value:22},{code: "NE",value:2},{code: "NH",value:20},{code: "NJ",value:62},{code: "NM",value:95},{code: "NY",value:22},{code: "OH",value:133},{code: "OK",value:53},{code: "OR",value:7},{code: "PA",value:38},{code: "RI",value:37},{code: "SC",value:26},{code: "TN",value:9},{code: "TX",value:22},{code: "UT",value:75},{code: "VA",value:126},{code: "WA",value:22},{code: "WV",value:2}]};
$(init)
function init() {
drawMap();
}
function drawMap() {
var map_select = $('#smartStates').val();
var map_text = $('#smartStates option:selected').text();
var mydata = states[map_select];
var mycolors = {resStates: {
min: 1,
type: 'linear',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
}, acadStates: {
min: 1,
type: 'linear',
minColor: '#FFEEEE',
maxColor: '#220000',
stops: [
[0, '#FFFFEE'],
[0.67, '#FF4444'],
[1, '#220000']
]
}, empStates: {
min: 1,
type: 'linear',
minColor: '#EEFFEE',
maxColor: '#002200',
stops: [
[0, '#EEFFEE'],
[0.67, '#44FF44'],
[1, '#002200']
]
}
}
// Adjusting codes to fit with the us-all-territories map
$.each(mydata, function(){ //looping through each instance of mydata
if (this.code == "PR") {
this.code = "pr-3614";
} else if (this.code == "undefined"){
//not sure what to do here
}
else if (this.code.length==2) {
this.code = "us-" + this.code.toLowerCase();
}
});
// Instanciate the map
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
title : {
text : 'SMART Participant Counts by ' + map_text
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: mycolors[map_select],
series : [{
animation: {
duration: 1000
},
data : mydata,
mapData: Highcharts.maps['countries/us/custom/us-all-territories'],
joinBy: ['hc-key', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.name}'
},
name: 'SMART Participants',
tooltip: {
pointFormat: '{point.name}: {point.value} participants'
}
}]
});
}
</script>
allAreasを直列にfalseに設定すると、空のマップゾーンは表示されません。例：http://jsfiddle.net/oen00hec/ –
allAreasをfalseに設定する問題は、データに存在しないものが単純にプロットされないことです。私が推測しているのは、私が望む出力を得るためには、私がプロットしたいすべての州のレコードをゼロにし、すべてのエリアをfalseに設定する必要があります。 – RyanM