在 HighCharts 地图上增加一个国家的面积?
Increase the size of one country on a HighCharts map?
我正在使用 Highcharts 集合中的欧洲地图来绘制等值线。
这很好,但马耳他太小了,人们很难看到它。所以我的问题是:有没有办法只增加地图上一个国家的面积?我知道通常情况下,在地图上这是用插图完成的,但在这里我只需要增加尺寸就可以了,所以它会稍微更明显一些。
例如,当我查看这张地图时,马耳他(就在意大利南端的西西里岛下方)非常小:https://jsfiddle.net/7j9fq8h3/
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
['dk', 0],
['fo', 1],
['hr', 2],
['nl', 3],
['ee', 4],
['bg', 5],
['es', 6],
['it', 7],
['sm', 8],
['va', 9],
['tr', 10],
['mt', 11],
['fr', 12],
['no', 13],
['de', 14],
['ie', 15],
['ua', 16],
['fi', 17],
['se', 18],
['ru', 19],
['gb', 20],
['cy', 21],
['pt', 22],
['gr', 23],
['lt', 24],
['si', 25],
['ba', 26],
['mc', 27],
['al', 28],
['cnm', 29],
['nc', 30],
['rs', 31],
['ro', 32],
['me', 33],
['li', 34],
['at', 35],
['sk', 36],
['hu', 37],
['ad', 38],
['lu', 39],
['ch', 40],
['be', 41],
['kv', 42],
['pl', 43],
['mk', 44],
['lv', 45],
['by', 46],
['is', 47],
['md', 48],
['cz', 49]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/europe'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/europe.js">Europe</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: false,
format: '{point.name}'
}
}]
});
是否有任何方法可以通过 API 使用 HighMaps 执行此操作,或者我最好的方法是创建我自己的 GEOJSON 文件?
非常感谢任何答案,
大卫
您需要找到所需的路径元素并对其进行平移和缩放变换。例如:
const malta = chart.series[0].points.find(p => p.name === 'Malta');
const bbox = malta.graphic.getBBox();
const centerX = bbox.width / 2 + bbox.x;
const centerY = bbox.height / 2 + bbox.y;
const scale = 3;
malta.graphic.attr({
transform: 'translate(' +
((1 - scale) * centerX) + ', ' + ((1 - scale) * centerY) +
') scale(' + scale + ')'
}).toFront();
现场演示: https://jsfiddle.net/BlackLabel/ez6kr8a7/
API参考:https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
有用的线程: Scale path from center
我正在使用 Highcharts 集合中的欧洲地图来绘制等值线。 这很好,但马耳他太小了,人们很难看到它。所以我的问题是:有没有办法只增加地图上一个国家的面积?我知道通常情况下,在地图上这是用插图完成的,但在这里我只需要增加尺寸就可以了,所以它会稍微更明显一些。 例如,当我查看这张地图时,马耳他(就在意大利南端的西西里岛下方)非常小:https://jsfiddle.net/7j9fq8h3/
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
['dk', 0],
['fo', 1],
['hr', 2],
['nl', 3],
['ee', 4],
['bg', 5],
['es', 6],
['it', 7],
['sm', 8],
['va', 9],
['tr', 10],
['mt', 11],
['fr', 12],
['no', 13],
['de', 14],
['ie', 15],
['ua', 16],
['fi', 17],
['se', 18],
['ru', 19],
['gb', 20],
['cy', 21],
['pt', 22],
['gr', 23],
['lt', 24],
['si', 25],
['ba', 26],
['mc', 27],
['al', 28],
['cnm', 29],
['nc', 30],
['rs', 31],
['ro', 32],
['me', 33],
['li', 34],
['at', 35],
['sk', 36],
['hu', 37],
['ad', 38],
['lu', 39],
['ch', 40],
['be', 41],
['kv', 42],
['pl', 43],
['mk', 44],
['lv', 45],
['by', 46],
['is', 47],
['md', 48],
['cz', 49]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/europe'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/europe.js">Europe</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: false,
format: '{point.name}'
}
}]
});
是否有任何方法可以通过 API 使用 HighMaps 执行此操作,或者我最好的方法是创建我自己的 GEOJSON 文件? 非常感谢任何答案, 大卫
您需要找到所需的路径元素并对其进行平移和缩放变换。例如:
const malta = chart.series[0].points.find(p => p.name === 'Malta');
const bbox = malta.graphic.getBBox();
const centerX = bbox.width / 2 + bbox.x;
const centerY = bbox.height / 2 + bbox.y;
const scale = 3;
malta.graphic.attr({
transform: 'translate(' +
((1 - scale) * centerX) + ', ' + ((1 - scale) * centerY) +
') scale(' + scale + ')'
}).toFront();
现场演示: https://jsfiddle.net/BlackLabel/ez6kr8a7/
API参考:https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
有用的线程: Scale path from center