Highchart显示风向风速
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="icon" href="https://static.jianshukeji.com/hcode/images/favicon.ico">
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script>
var fx={{ wd|safe}}
var wind=[];
for(var i=0;i<eval(fx).length;i++){
wind[i]=fx[i];
console.log(wind[i]);
}
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: '月平均降雨量'
},
subtitle: {
text: '数据来源: WorldClimate.com'
},
xAxis: {
categories:{{ categories|safe }},
crosshair: true
},
yAxis: {
min: 0,
title: {
text: '温度'
}
},
tooltip: {
pointFormatter: function () {
return '<span style="color:this.series.color"></span>'+
this.series.name+': <b>'+this.y+'m/s</b><br/>风向:<b>'+wind[this.x]+'°</b><br/>'
},
series: [{
name: '风速',
data: {{ ws|safe }},
}]
});
});
console.log(this.x)
</script>
</body>
</html>
网友评论