Question

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

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

<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 Dependencies中的软件包，但是工作量很大，我不知道缺少什么。而且我还没弄明白如何在Mac Visual Studio中显示控制台，所以如果有任何线索，我还没有看到它们。

Answer 1

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

我需要在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停止更新

1 个答案: