如何在Highmaps

Question

我是highmaps / highcharts的新手，并试图将地图应用程序放在同一地图上显示2种数据。一种是突出显示的国家（以红色显示），另一种是气泡形式（目前以黑色显示）。我面临的问题是，虽然第一个系列数据（红色区域）只是变量data中的国家/地区，但黑色泡沫似乎无处不在，而不仅仅是变量data中的国家/地区。

我添加了以下highcharts脚本 -

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

这就是我的剧本的样子 -

function populateChart (data) {

// Initiate the chart
chart = $('#container').highcharts('Map', {

    chart: {
        // Edit chart spacing
        spacingBottom: 100,
        spacingTop: 100

    },

    title: {
        text: null
    },

    mapNavigation: {
        enabled: false
    },

    legend: {
        enabled: false
    },

    tooltip: {
        formatter: function () {

            return this.point.name;
        },
        shared: false
    },

    series: [{
        type: 'map',
        data: data,
        mapData: Highcharts.maps['custom/world'],
        joinBy: 'hc-key',
        name: null,
        color: '#cb202d',
        states: {
            hover: {
                color: '#cb202d',
                style: { fontFamily: '\'Proxima Nova Extra Condensed\', sans-serif', fontSize: '10px' },
            }
        },
        dataLabels: {
            enabled: false,
            color: '#FFFFFF',
            style: { fontFamily: '\'Proxima Nova Extra Condensed\', sans-serif', fontSize: '17px' },
            format: '{point.value}'
        }
    },
    {
        type: 'mapbubble',
        name: null,
        mapData: Highcharts.maps['custom/world'],
        joinBy: 'hc-key',
        data: data,
        minSize: 4,
        maxSize: '8%',
        animation: true,
        color: '#000000'
    }]
});

};

我研究了很多但没有取得多大成功。如果有人能指出我正确的方向，我将不胜感激。提前谢谢。

Answer 1

似乎两个系列之间共享数据，系列内部对其进行修改。避免它的最佳方法可能是使用数据副本（每个系列一个副本）。

    /// <summary>
    /// Converts a date to a week number.
    /// ISO 8601 week 1 is the week that contains the first Thursday that year.
    /// </summary>
    public static int ToIso8601Weeknumber(this DateTime date)
    {
        var thursday = date.AddDays(3 - date.DayOfWeek.DayOffset());
        return (thursday.DayOfYear - 1) / 7 + 1;
    }

    /// <summary>
    /// Converts a week number to a date.
    /// Note: Week 1 of a year may start in the previous year.
    /// ISO 8601 week 1 is the week that contains the first Thursday that year, so
    /// if December 28 is a Monday, December 31 is a Thursday,
    /// and week 1 starts January 4.
    /// If December 28 is a later day in the week, week 1 starts earlier.
    /// If December 28 is a Sunday, it is in the same week as Thursday January 1.
    /// </summary>
    public static DateTime FromIso8601Weeknumber(int weekNumber, int? year = null, DayOfWeek day = DayOfWeek.Monday)
    {
        var dec28 = new DateTime((year ?? DateTime.Today.Year) - 1, 12, 28);
        var monday = dec28.AddDays(7 * weekNumber - dec28.DayOfWeek.DayOffset());
        return monday.AddDays(day.DayOffset());
    }

    /// <summary>
    /// Iso8601 weeks start on Monday. This returns 0 for Monday.
    /// </summary>
    private static int DayOffset(this DayOfWeek weekDay)
    {
        return ((int)weekDay + 6) % 7;
    }

示例：http://jsfiddle.net/1hnqjvqb/1/