Ich habe eine funktionierende Website mit dem Standard Visual Studio 2017. Es besteht aus einem C# -Backend mit einer einzigen API verwendet, um Daten in HighMaps basierend auf den Einstellungen des Benutzers angezeigt werden wählt aus der jQuery-Benutzeroberfläche aus. Da ich meine Windows-Maschine nicht so sehr liebe wie meinen Mac, dachte ich, ich würde versuchen, .Net Core 2.0 zu verwenden - und damit die Notwendigkeit für meinen Windows-Laptop zu beseitigen. Alles lief sehr gut (Kudos an Microsoft), aber aus irgendeinem Grund wird der jQuery-Code, der die API aufruft, die zurückgegebenen Daten nicht wie gewünscht in die Map geschoben.highmaps gestoppt Aktualisierung nach dem Umzug nach .NET Core
Hier ist der jQuery-Code, der ausgeführt wird - der alert() zeigt zwar die JSON-Daten an, wird jedoch nie in der Map angezeigt. Ich kann HTML oder CSS bei Bedarf posten, aber für den Moment habe ich die Kopf- und Skriptabschnitte eingefügt.
<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>
Und hier ist der jQuery-Code:
<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);
Alles, was in der Karte die beiden Landkreise sind scheint, dass ich fest einprogrammiert (zeigen, dass die Karte in Ordnung funktioniert). Ich frage mich, ob es ein Paket gibt, das ich in NuGet oder SDK-Abhängigkeiten hinzufügen muss, aber so viel funktioniert, dass ich nicht weiß, was fehlt. Und ich habe nicht herausgefunden, wie man die Konsole in Mac Visual Studio zeigt, also wenn irgendwelche Hinweise dort hin gehen, habe ich sie nicht gesehen.
Fällt der Code irgendwelche Fehler? Was ist die Ausgabe von 'console.log (JSON.parse (d))'? –
Die Ausgabe von JSON.stringify (d) variiert abhängig von der Schieberposition, hat aber folgende Form: "[{" code ":" us-al-001 "," name ":" Autauga County, AL "," Wert ": 3}, {" code ":" us-al-003 "," Name ":" Baldwin County, AL "," Wert ": 3}, {" code ":" us-al-005 "," Name ":" Barbour County, AL "," Wert ": 3}, {" Code ":" us-al-007 "," Name ":" Bibb County, AL "," Wert ": 3}]" - (eigentlich viel länger). Ich habe nicht herausgefunden, wie man mit dem Mac Visual Studio eine Konsolenausgabe erhält (außer wenn etwas so falsch ist, dass es einen Stack-Trace zeigt) (was es hier nicht tut). –
Ich habe herausgefunden, wie man das Konsolenausgabefeld anzeigt Es wird nichts Interessantes zu den Pads für die Anwendungsausgabe, Fehler oder Geräteprotokoll gesendet –