Javascript 如何从web浏览器中从c#上的API获取数据并在图表上显示数据
我在node.js上有一个restful API，我想在windows窗体应用程序上显示数据，该应用程序中包含了带有google地图和混合图表的解决方案中的web浏览器 当用户单击某个标记在图表上显示数据时，我想显示api中的数据 如何从api获取数据并在图表上显示onclick事件的数据？ 我有1919个标记，我想获取它们的索引，以便可以在api服务器的地址替换它们 API中的url为： 我希望从这个urlid中可以看到如下标记： API如下所示： 代码：Javascript 如何从web浏览器中从c#上的API获取数据并在图表上显示数据,javascript,c#,winforms,api,web,Javascript,C#,Winforms,Api,Web,我在node.js上有一个restful API，我想在windows窗体应用程序上显示数据，该应用程序中包含了带有google地图和混合图表的解决方案中的web浏览器 当用户单击某个标记在图表上显示数据时，我想显示api中的数据 如何从api获取数据并在图表上显示onclick事件的数据？ 我有1919个标记，我想获取它们的索引，以便可以在api服务器的地址替换它们 API中的url为： 我希望从这个urlid中可以看到如下标记： API如下所示： 代码： <!DOCTYPE H
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//I want a function here to get data from the api and display different data on the lines on the chart.
var markers = [
{ "title": 'Населено място', "lat": '41.19197', "lng": '25.33719', "description": 'Информация за населеното място' }
];
window.onload = function () {
LoadMap();
DrawChart();
//remove the markers here..
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
minZoom: 7,
maxZoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (var i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent("<div style = 'width:300px;min-height:100px'>" + data.description + "</div>");
infoWindow.open(map, marker)
});
})(marker, data);
latlngbounds.extend(marker.position);
}
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
function DrawChart() {
new Chart(document.getElementById("mixed-chart"), {
type: 'bar',
data: {
labels: ["1900", "1950", "1999", "2050"],
datasets: [{
label: "Температура",
type: "line",
borderColor: "#ff1414",
backgroundColorHover: "#ff1414",
data: [133, 221, 783, 2478],
fill: false,
}, {
label: "Атмосферно налягане",
type: "line",
borderColor: "#8e5ea2",
backgroundColorHover: "#14ffcc",
data: [408, 547, 675, 734],
fill: false
}, {
label: "Скорост на вятъра",
type: "line",
borderColor: "#b5c918",
data: [400, 500, 600, 700],
fill: false
}, {
label: "Относителна влажност",
type: "line",
borderColor: "#18c994",
data: [408, 547, 675, 734],
fill: false
} , {
label: "Дъжд",
type: "bar",
backgroundColor: "#038cfc",
borderColor: "#038cfc",
data: [402, 543, 635, 714],
}, {
label: "Сняг",
type: "bar",
backgroundColor: "#14ffcc",
backgroundColorHover: "#14ffcc",
data: [133, 221, 783, 2478]
}
]
},
options: {
title: {
display: true,
text: 'Синоптична графика'
},
legend: { display: true },
tooltips: {
mode: 'nearest'
}
}
});
}
</script>
<div id="dvMap" style="width: 100%; height: 600px">
</div>
<div style="width: 100%; height: 270px">
<canvas id="mixed-chart" width="1000" height="270"></canvas>
</div>
</body>
</html>
//我需要一个函数从api中获取数据，并在图表的各行上显示不同的数据。
变量标记=[
{“标题”：“lat”：“41.19197”，“液化天然气”：“25.33719”，“说明”：“说明”：“说明”
];
window.onload=函数（）{
LoadMap（）；
图纸（）；
//把这里的标记去掉。。
}
函数LoadMap（）{
变量映射选项={
中心：新建google.maps.LatLng（标记[0].lat，标记[0].lng），
缩放：8，
minZoom:7，
最大缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var infoWindow=new google.maps.infoWindow（）；
var latlngbounds=new google.maps.latlngbounds（）；
var map=new google.maps.map（document.getElementById（“dvMap”）、mapOptions）；
对于（var i=0；i