2017-12-27 952 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