0
2 개 위치 x, y가 있습니다. jQuery/Highmaps 옵션을 통해 하나의 위치를 형성하기 위해 함께 그룹화 할 수 있습니까? 나는 이것이 Inkscape와 같은 벡터 그래픽 소프트웨어를 통해 가능하다는 것을 알고있다. (출처 : http://www.highcharts.com/docs/maps/custom-maps).하이 맵에서 두 위치를 결합하십시오.
A
답변
0
귀하의 질문에서 이해할 수있는 것은 하나의지도에 두 개의 지역을 묶고 싶다는 것입니다. 당신이
plotOptions 사용하여이 작업을 수행 할 수 있습니다 { allAreas : 거짓 } 두지도는 동일한 기본 좌표가있는 경우
0
가 네, 가능합니다. http://jsfiddle.net/1k5ddu85/
$(function() {
// Prepare demo data
var data = [
{
"hc-key": "us-ma",
"value": 0
},
{
"hc-key": "us-wa",
"value": 1
},
{
"hc-key": "us-ca",
"value": 2
},
{
"hc-key": "us-or",
"value": 3
},
{
"hc-key": "us-wi",
"value": 4
},
{
"hc-key": "us-me",
"value": 5
},
{
"hc-key": "us-mi",
"value": 6
},
{
"hc-key": "us-nv",
"value": 7
},
{
"hc-key": "us-nm",
"value": 8
},
{
"hc-key": "us-co",
"value": 9
},
{
"hc-key": "us-wy",
"value": 10
},
{
"hc-key": "us-ks",
"value": 11
},
{
"hc-key": "us-ne",
"value": 12
},
{
"hc-key": "us-ok",
"value": 13
},
{
"hc-key": "us-mo",
"value": 14
},
{
"hc-key": "us-il",
"value": 15
},
{
"hc-key": "us-in",
"value": 16
},
{
"hc-key": "us-vt",
"value": 17
},
{
"hc-key": "us-ar",
"value": 18
},
{
"hc-key": "us-tx",
"value": 19
},
{
"hc-key": "us-ri",
"value": 20
},
{
"hc-key": "us-al",
"value": 21
},
{
"hc-key": "us-ms",
"value": 22
},
{
"hc-key": "us-nc",
"value": 23
},
{
"hc-key": "us-va",
"value": 24
},
{
"hc-key": "us-ia",
"value": 25
},
{
"hc-key": "us-md",
"value": 26
},
{
"hc-key": "us-de",
"value": 27
},
{
"hc-key": "us-pa",
"value": 28
},
{
"hc-key": "us-nj",
"value": 29
},
{
"hc-key": "us-ny",
"value": 30
},
{
"hc-key": "us-id",
"value": 31
},
{
"hc-key": "us-sd",
"value": 32
},
{
"hc-key": "us-ct",
"value": 33
},
{
"hc-key": "us-nh",
"value": 34
},
{
"hc-key": "us-ky",
"value": 35
},
{
"hc-key": "us-oh",
"value": 36
},
{
"hc-key": "us-tn",
"value": 37
},
{
"hc-key": "us-wv",
"value": 38
},
{
"hc-key": "us-dc",
"value": 39
},
{
"hc-key": "us-la",
"value": 40
},
{
"hc-key": "us-fl",
"value": 41
},
{
"hc-key": "us-ga",
"value": 42
},
{
"hc-key": "us-sc",
"value": 43
},
{
"hc-key": "us-mn",
"value": 44
},
{
"hc-key": "us-mt",
"value": 45
},
{
"hc-key": "us-nd",
"value": 46
},
{
"hc-key": "us-az",
"value": 47
},
{
"hc-key": "us-ut",
"value": 48
},
{
"hc-key": "us-hi",
"value": 49
},
{
"value": 51
}
];
var data2 = [{
"hc-key": "us-ak-110",
"value": 3
},
{
"hc-key": "us-ak-261",
"value": 4
},
{
"hc-key": "us-ak-020",
"value": 5
},
{
"hc-key": "us-ak-070",
"value": 4
},
{
"hc-key": "us-ak-013",
"value": 3
},
{
"hc-key": "us-ak-180",
"value": 2
},
{
"hc-key": "us-ak-016",
"value": 4
},
{
"hc-key": "us-ak-150",
"value": 3
},
{
"hc-key": "us-ak-290",
"value": 33
},
{
"hc-key": "us-ak-105",
"value": 44
},
{
"hc-key": "us-ak-122",
"value": 22
},
{
"hc-key": "us-ak-050",
"value": 23
},
{
"hc-key": "us-ak-164",
"value": 43
},
{
"hc-key": "us-ak-060",
"value": 23
},
{
"hc-key": "us-ak-130",
"value": 43
},
{
"hc-key": "us-ak-170",
"value": 23
},
{
"hc-key": "us-ak-090",
"value": 43
},
{
"hc-key": "us-ak-068",
"value": 23
},
{
"hc-key": "us-ak-198",
"value": 23
},
{
"hc-key": "us-ak-195",
"value": 2
},
{
"hc-key": "us-ak-100",
"value": 43
},
{
"hc-key": "us-ak-230",
"value": 34
},
{
"hc-key": "us-ak-240",
"value": 32
},
{
"hc-key": "us-ak-220",
"value": 22
},
{
"hc-key": "us-ak-188",
"value": 23
},
{
"hc-key": "us-ak-270",
"value": 43
},
{
"hc-key": "us-ak-185",
"value": 23
},
{
"hc-key": "us-ak-282",
"value": 43
},
{
"hc-key": "us-ak-275",
"value": 23
}
];
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Highmaps basic demo'
},
subtitle : {
text : 'Source map: <a href="https://code.highcharts.com/mapdata/countries/us/us-all.js">United States of America</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
\t \t allAreas: false,
data : data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}, {
\t \t allAreas: false,
data : data2,
mapData: Highcharts.maps['countries/us/us-all-all'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}, {
name: 'Separators',
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/us/us-all-all'], 'mapline'),
color: 'silver',
showInLegend: false,
enableMouseTracking: false
}]
});
});#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all-all.js"></script>
<div id="container"></div>관련 문제
- 1. 하이 차트에서 두 개의 데이터 필드를 결합하십시오.
- 2. 왜 GeoJSON지도가 WSG84 용 하이 맵에서 펼쳐지나요?
- 3. 확대/축소가 하이 맵에서 작동하지 않습니다.
- 4. 히트 맵에서 셀 크기를 설정하십시오. 하이 차트
- 5. 이 두 쿼리를 하나로 결합하십시오
- 6. 두 테이블을 결합하십시오.
- 7. 두 개의 정규식을 결합하십시오
- 8. 팬더와 두 파일을 결합하십시오.
- 9. 두 개의 ContentView를 결합하십시오.
- 10. 두 쿼리를 하나로 결합하십시오.
- 11. 이 두 쿼리를 결합하십시오.
- 12. 두 개의 정규식을 결합하십시오
- 13. 조건이있는 두 테이블을 결합하십시오.
- 14. 두 rpm을 하나로 결합하십시오.
- 15. 두 목록을 CSH에 결합하십시오.
- 16. 두 표현식을 결합하십시오.
- 17. jquery의 두 함수를 결합하십시오.
- 18. 하이 맵에서 작업 할 사용자 정의 GeoJSON 파일 얻기
- 19. 두 행의 두 행을 1 행에 결합하십시오.
- 20. C - 두 개의 uint32_t를 두 개로 결합하십시오.
- 21. 두 개의 정수 배열을 결합하십시오.
- 22. 두 xml 파일을 하나로 결합하십시오.
- 23. db에서 두 문자열을 함께 결합하십시오.
- 24. SQL 관계없이 두 테이블을 결합하십시오.
- 25. 두 개의 SOQL 쿼리를 결합하십시오
- 26. 두 Linq 람다 식을 결합하십시오
- 27. Sql 두 개의 셀을 결합하십시오.
- 28. RxJava - 두 개의 Observables를 결합하십시오.
- 29. JS에서 RegEx 두 개를 결합하십시오.
- 30. 배열의 두 요소를 결합하십시오 perl