迁移到 .NET Core 后 highmaps 停止更新

Question

我有一个使用标准 Visual Studio 2017 的工作网站。它由一个 C# 后端和一个 API 组成，用于根据用户的设置请求在 HighMaps 中显示的数据从 jQuery UI 中选择。由于我对 Windows 机器的喜爱程度不及对 Mac 的喜爱程度，我想我会尝试使用 .Net Core 2.0 - 从而消除对 Windows 笔记本电脑的需求。一切都非常顺利（微软的荣誉），但由于某种原因，调用 API 的 jQuery 代码，返回的数据没有像它应该的那样被推入地图。

这是运行的 jQuery 代码 - alert() 确实显示 JSON 数据，但它从未反映在地图中。如果需要，我可以 post HTML 或 CSS，但现在我已经包含了头部和脚本部分。

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Great Locations</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/maps/highmaps.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/maps/modules/data.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/mapdata/countries/us/us-all-all.js"></script>
</head>

这里是 jQuery 代码：

<script type="text/javascript">
    var climateSteps = [
        "Tropical",
        "Semi-Arid",
        "Desert",
        "Humid",
        "Mediterranean",
        "Wet All Seasons",
        "Wet Summer",
        "Winter Snow",
        "Polar"];

    var climateRange = "C08";

    $(function () {
        $("#climate-slider .slider").slider({
            range: true,
            min: 0,
            max: 8,
            values: [0, 8],
            slide: function (event, ui) {
                climateRange = "C" + ui.values[0].toString() + ui.values[1].toString();
                if (ui.values[0] == ui.values[1]) {
                    /* if user selected a single value (not a range), adjust text to fit */
                    $(this).parent().children(".slider-range").text(climateSteps[ui.values[0]]);
                }
                else {
                    $(this).parent().children(".slider-range").text(climateSteps[ui.values[0]] + " to " + climateSteps[ui.values[1]]);
                }
            }
        })
    });

    $.noConflict();
    tableResult = '[{"code":"us-al-001","name":"Autauga County, AL","value":1}, {"code":"us-il-019","name":"Champaign County, IL","value":3}]';

    (function ($) {
        function GetCounties(userSelections) {
            jQuery.support.cors = true;
            $.ajax({
                url: "http://localhost:5000/api/products/" + userSelections,
                type: "GET",
                dataType: "json",
                success: function (d) {
                    data = JSON.stringify(d);
                    alert("API data received: " + data)
                    tableResult = data;
                    $("#map-container").highcharts().series[0].update({
                        data: JSON.parse(d)
                    });
                },
                error: function (d) {
                    alert("API found error: " + JSON.stringify(d));
                }
            });
        }

        jQuery(".button-submit").bind("click", {
        }, function (e) {
            GetCounties(climateRange);
            });

        data = JSON.parse(tableResult);

        var countiesMap = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"]);
        var lines = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"], "mapline");

        // add state acronym for tooltip
        Highcharts.each(countiesMap, function (mapPoint) {
            var state = mapPoint.properties["hc-key"].substring(3, 5);
            mapPoint.name = mapPoint.name + ", " + state.toUpperCase();
        });

        var options = {
            chart: {
                borderWidth: 1,
                marginRight: 50 // for the legend
            },

            exporting: {
                enabled: false
            },

            title: {
               text: "My Great Locations"
            },

            legend: {
                layout: "vertical",
                align: "right",
                floating: true,
                valueDecimals: 0,
                valueSuffix: "",
                backgroundColor: "white",
                symbolRadius: 0,
                symbolHeight: 0
            },

            mapNavigation: {
                enabled: false
            },

            colorAxis: {
                dataClasses: [{
                    from: 1,
                    to: 1,
                    color: "#000099",
                    name: "Perfect!"
                }, {
                    from: 2,
                    to: 2,
                    color: "#009999",
                    name: "Very Nice!"
                }, {
                    from: 3,
                    to: 3,
                    color: "#00994c",
                    name: "Good Fit"
                }]
            },

            tooltip: {
                headerFormat: "",
                formatter: function () {
                    str = "Error";
                    if (this.point.value == 1) {
                        str = "Perfect!";
                    }
                    if (this.point.value == 2) {
                        str = "Very Nice!";
                    }
                    if (this.point.value == 3) {
                        str = "Good Fit";
                    }
                    return this.point.name + ": <b>" + str + "</b>";
                }
            },
            plotOptions: {
                mapline: {
                    showInLegend: false,
                    enableMouseTracking: false
                }
            },

            series: [{
                mapData: countiesMap,
                data: data,
                joinBy: ["hc-key", "code"],
                borderWidth: 1,
                states: {
                    hover: {
                        color: "#331900"
                    }
                }
            }, {
                type: "mapline",
                name: "State borders",
                data: [lines[0]],
                color: "black"
            }]
        };

        // Instanciate the map
        $("#map-container").highcharts("Map", options);

地图中出现的都是我硬编码的两个县（以表明地图工作正常）。我想知道是否有一些包需要添加到 NuGet 或 SDK 依赖项中，但工作太多，我不知道缺少什么。而且我还没有想出如何在 Mac Visual Studio 中显示控制台，所以如果有任何线索，我还没有看到它们。

Answer 1

非常感谢 Highcharts 支持团队 - 这个问题的最终答案是 Mac Visual Studio .Net Core 框架出于某种原因与 Windows 平台运行经典Visual Studio。这是对我有用的答案：

我需要将它与 Mac Visual Studio 一起用于 .Net Core - 否 JSON.parse(d) 需要：

$("#map-container").highcharts().series[0].update({
    data: d
});

而不是这个，它适用于 Windows 成熟的 Visual Studio（社区版）：

$("#map-container").highcharts().series[0].update({
    data: JSON.parse(d)
});

迁移到 .NET Core 后 highmaps 停止更新

highmaps stopped updating after move to .NET Core

highcharts

highmaps

.net-core

asp.net-core