在 HighMaps 中，我们如何图案填充世界地图？

Question

我想在世界地图上添加点状图案...使用高位图和图案-fill.js。在这样做时，我给出了一个没有颜色的基本地图。

我使用了以下模板...帮我把它弄好。

目标是得到一个世界大陆地图，其中所有大陆都被图案填充，图案如下：

pattern-to-be-generated

(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}'
      }
    }]
  });

})();

Answer 1

您在 plotOptions 中的 color 设置被系列选项中的 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

在 HighMaps 中，我们如何图案填充世界地图？

In HighMaps how can we pattern fill a world map?

javascript

highcharts

angular

angular-highcharts