我正在嘗試將虛線圖案添加到世界地圖……使用 highmaps 和 pattern-fill.js。在這樣做時，我給出了一個沒有顏色的基本地圖。
我使用了下面的模板來做同樣的事情……幫我把它弄好。
目標是得到一張世界大陸地圖，其中所有大陸都被圖案填充，圖案如下所示：
待生成模式
(async () => {
const topology = await fetch(
'https://code.highcharts.com/mapdata/custom/world-continents.topo.json'
).then(response => response.json());
// Prepare demo data. The 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.
const data = [
['eu', 10],
['oc', 11],
['af', 12],
['as', 13],
['na', 14],
['sa', 15]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
type: 'map',
map: topology
},
title: {
text: 'Highcharts Maps basic demo'
},
subtitle: {
text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world-continents.topo.json">World continents</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
plotOptions: {
series: {
type: "map",
color: {
pattern: {
path: {
d: 'M 3 3 L 8 3 L 8 8 Z',
fill: '#102045'
},
width: 12,
height: 12,
color: '#907000',
opacity: 0.5
}
}
}
},
series: [{
data: data,
name: 'Random data',
color: 'red',
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
})();uj5u.com熱心網友回復：
您的color設定plotOptions被color系列選項覆寫。您需要在其中一個地方指定顏色。
plotOptions: {
series: {
type: "map",
color: {
pattern: {
path: {
d: 'M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0',
fill: 'red'
},
patternTransform: 'rotate(20)',
width: 12,
height: 12,
color: 'red'
}
}
}
}
現場演示：http: //jsfiddle.net/BlackLabel/p60e79sw/
檔案： https ://www.highcharts.com/docs/chart-design-and-style/pattern-fills
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/476930.html
標籤：javascript 有角度的 高图表 角高图
上一篇：引入stylelint-config-standard-scss時，stylelint給出錯誤“類擴展值未定義不是建構式或null”