【发布时间】：2018-01-27 02:50:29
【问题描述】：
我有一个使用标准 Visual Studio 2017 的工作网站。它由一个 C# 后端和一个 API 组成，该 API 用于根据用户从 jQuery UI 中选择的设置请求要在 HighMaps 中显示的数据。由于我不像我的 Mac 那样爱我的 Windows 机器，我想我会尝试使用 .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 依赖项中，但是工作量很大，以至于我不知道缺少什么。而且我还没有弄清楚如何在 Mac Visual Studio 中显示控制台，所以如果有任何线索，我还没有看到它们。
【问题讨论】：
-
代码有没有报错？
console.log(JSON.parse(d))的输出是什么？ -
JSON.stringify(d) 的输出因滑块位置而异，但形式为："[{"code":"us-al-001","name":"Autauga阿拉巴马州县","value":3},{"code":"us-al-003","name":"阿拉巴马州鲍德温县","value":3},{"code":"us -al-005","name":"阿拉巴马州巴伯县","value":3},{"code":"us-al-007","name":"阿拉巴马州比伯县","value ":3}]" - （实际上更长）。我还没有弄清楚如何使用 Mac Visual Studio 获取控制台输出（除非出现错误以至于它显示堆栈跟踪（这里没有这样做）。
-
我发现了如何显示控制台输出板，但没有任何有趣的东西被发送到应用程序输出、错误或设备日志板。
-
我知道这个例子很长 - 但这是核心问题：使用 Visual Studio 经典版（在 Windows 10 操作系统上开发），以下代码会更新地图。但是在 Visual Studio for Mac 上使用 .Net Core，地图不会更新（即使警报显示已收到数据）。
code$("#map-container").highcharts().series[0].update({ data: JSON.parse(d) }); }, error: function (d) { alert("API 发现错误：" + JSON.stringify(d)); } });
标签： highcharts asp.net-core .net-core highmaps