Highcharts 地图的辅助功能模式

Question

我正在使用 NextJS，因此我正在使用 Highcharts React。我需要使这些国家的颜色相同但有图案。

我的目标是重现这个： 世界地图，其中区域涂成红色并带有图案

我试图复制饼图演示中使用的代码。

我的代码尝试复制饼图模式

import React, { FC } from 'react';

import Highcharts from 'highcharts';
import HighchartsMap from 'highcharts/modules/map';
import Patterns from 'highcharts/modules/pattern-fill';
import HighchartsReact from 'highcharts-react-official';

import mapDataWorld from './world-continents.geo.json';

// Load Highcharts Maps as a module
if (typeof Highcharts === 'object') {
    HighchartsMap(Highcharts);
    Patterns(Highcharts);
}

interface Props {
    data: Data[];
}

interface Data {
    Value: number;
    Type: string;
    Color: string;
}

const MapChart: FC<Props> = ({ data }) => {
    const patterns = [
        {
            pattern: {
                color: '#698F01',
                height: 5,
                path: 'M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5',
                patternTransform: 'scale(1.4 1.4)',
                width: 5,
            },
        },
        {
            pattern: {
                color: '#265FB5',
                height: 5,
                path: 'M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5',
                patternTransform: 'scale(1.4 1.4)',
                width: 5,
            },
        },
        {
            pattern: {
                color: '#F4693E',
                height: 5,
                path: 'M 2 0 L 2 5 M 4 0 L 4 5',
                patternTransform: 'scale(1.4 1.4)',
                width: 5,
            },
        },
        {
            pattern: {
                color: '#222',
                height: 5,
                path: 'M 0 2 L 5 2 M 0 4 L 5 4',
                patternTransform: 'scale(1.4 1.4)',
                width: 5,
            },
        },
        {
            pattern: {
                color: '#4C0684',
                height: 5,
                path: 'M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5',
                patternTransform: 'scale(1.4 1.4)',
                width: 5,
            },
        },
    ];
    const chartData = data.map((item: any, index) => {
        return {
            value: item.Value,
            'hc-key': item.Type,
            color: patterns[index] ?? item.Color ?? 'transparent',
        };
    });

    console.log(chartData);
    const options = {
        chart: {
            map: mapDataWorld,
            height: '336px',
        },
        title: {
            text: '',
        },
        legend: {
            enabled: false,
        },
        credits: {
            enabled: false,
        },
        accessibility: {
            enabled: true,
        },
        series: [
            {
                data: chartData,
                mapData: mapDataWorld,
                joinBy: 'hc-key',
                dataLabels: {
                    enabled: false,
                },
                states: {
                    hover: {
                        borderColor: '#191919',
                        borderWidth: 1,
                    },
                },
            },
        ],
        tooltip: {
            enabled: false,
        },
    };

    return (
        <HighchartsReact
            highcharts={Highcharts}
            options={options}
            constructorType={'mapChart'}
        />
    );
};

export default MapChart;

这是我生成的图表数据

[
    {
        "value": 46.851518,
        "hc-key": "na",
        "color": {
            "pattern": {
                "color": "#698F01",
                "height": 5,
                "path": "M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5",
                "patternTransform": "scale(1.4 1.4)",
                "width": 5
            }
        }
    },
    {
        "value": 40.324664,
        "hc-key": "eu",
        "color": {
            "pattern": {
                "color": "#265FB5",
                "height": 5,
                "path": "M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5",
                "patternTransform": "scale(1.4 1.4)",
                "width": 5
            }
        }
    },
    {
        "value": 10.483749,
        "hc-key": "as",
        "color": {
            "pattern": {
                "color": "#F4693E",
                "height": 5,
                "path": "M 2 0 L 2 5 M 4 0 L 4 5",
                "patternTransform": "scale(1.4 1.4)",
                "width": 5
            }
        }
    },
    {
        "value": 1.276916,
        "hc-key": "oc",
        "color": {
            "pattern": {
                "color": "#222",
                "height": 5,
                "path": "M 0 2 L 5 2 M 0 4 L 5 4",
                "patternTransform": "scale(1.4 1.4)",
                "width": 5
            }
        }
    },
    {
        "value": 0.810823,
        "hc-key": "sa",
        "color": {
            "pattern": {
                "color": "#4C0684",
                "height": 5,
                "path": "M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5",
                "patternTransform": "scale(1.4 1.4)",
                "width": 5
            }
        }
    },
    {
        "value": 0.25233,
        "hc-key": "af",
        "color": "transparent"
    }
]

我尝试的结果

我已经摆弄了尺寸，我能做的最好的就是得到几乎看不见的点

我的 Highcharts 版本： "highcharts": "^11.1.0", "highcharts-pattern-fill": "^3.0.3", “highcharts-react-official”：“^3.2.0”，

Answer 1

导致模式缩放不正确的问题是自 Highcharts v11.3.0 版本以来已修复的错误。

参考资料：
https://www.highcharts.com/blog/changelog/#highcharts-maps-v11.3.0
https://github.com/highcharts/highcharts/issues/19551