2017-12-27 365 views
0

我有一个使用标准Visual Studio 2017的工作网站。它由一个C#后台和一个API组成,用于根据用户的设置请求数据在HighMaps中显示从jQuery UI中选择。由于我不喜欢我的Windows机器,几乎和我的Mac一样多,所以我想我会尝试使用.Net Core 2.0 - 从而消除对我的Windows笔记本电脑的需求。一切都变得非常顺利(Kudos to Microsoft),但由于某种原因调用API的jQuery代码,返回的数据没有像应该那样被推送到地图中。highmaps在迁移到.NET Core后停止更新

下面是运行的jQuery代码 - alert()确实显示JSON数据,但它永远不会反映在地图中。如果需要,我可以发布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 Dependencies中的包,但这么多工作,我不知道缺少什么。我还没有想出如何在Mac Visual Studio中显示控制台,所以如果有任何线索在那里,我还没有看到它们。

+0

该代码是否会抛出任何错误? 'console.log(JSON.parse(d))'的输出是什么? –

+0

JSON.stringify(d)的输出取决于滑块的位置,但具有以下形式:“[{”code“:”us-al-001“,”name“:”Autauga County,AL“,”value “:3”,{“code”:“us-al-003”,“name”:“鲍德温县,AL”,“value”:3},{“code”:“us-al-005”名称“:”Barbour County,AL“,”value“:3},{”code“:”us-al-007“,”name“:”Bibb County,AL“,”value“:3}]” (实际上更长)。我还没有想出如何使用Mac Visual Studio获取控制台输出(除非出现如此错误以至于显示堆栈跟踪(它不在此处执行))。 –

+0

我发现如何显示控制台输出板,但 –

回答

0

非常感谢Highcharts支持团队 - 这个问题的最终答案是由于某种原因,Mac Visual Studio .Net Core框架与运行经典Visual Studio的Windows平台不同。这里是为我工作的回答:我需要与Mac的Visual Studio与.net核心使用

- 需要没有 JSON.parse(d):

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

取而代之的是,这适用于Windows完全版Visual Studio(社区版):

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

如果你得到不同的结果(-type),你可能想要在'load' ;否则返回d; }' - 然后用'data:loadData(d)'替换中间行。这应该适用于任何操作系统/版本的Visual Studio。 – David