基于highchart修改而成的风力风向图

1.替换highchart.js drawpoints方法,替换内容如下:

drawPoints: function() {
var a, b = this.points,
c = this.chart,
d, e, f, g, h, i, j, k;
d = this.options.marker;
var l = this.pointAttr[""],
m,
n = this.markerGroup,
o = p(d.enabled, this.activePointCount < 0.5 * this.xAxis.len / d.radius); if (d.enabled !== !1 || this._hasPointMarkers) for (f = b.length; f--;) if (g = b[f], d = U(g.plotX), e = g.plotY, k = g.graphic, i = g.marker || {},
a = o && i.enabled === t || i.enabled, m = c.isInsidePlot(v(d), e, c.inverted), a && e !== t && !isNaN(e) && g.y !== null) if (a = g.pointAttr[g.selected ? "select": ""] || l, h = a.r, i = p(i.symbol, this.symbol), j = i.indexOf("url") === 0, k) k[m ? "show": "hide"](!0).animate(r({
x: d - h,
y: e - h
},
k.symbolName ? {
width: 2 * h,
height: 2 * h
}: {}));
else {
if(m && (h > 0 || j)){
switch(g.extra){
case 1: g.graphic = c.renderer.symbol("triangle_1", d - h, e - h, 2 * h, 2 * h).attr(a).add(n);
break;
case 2: g.graphic = c.renderer.symbol("triangle_2", d - h, e - h, 2 * h, 2 * h).attr(a).add(n);
break;
case 3: g.graphic = c.renderer.symbol("triangle_3", d - h, e - h, 2 * h, 2 * h).attr(a).add(n);
break;
case 4: g.graphic = c.renderer.symbol("triangle_4", d - h, e - h, 2 * h, 2 * h).attr(a).add(n);
break;
case 5: g.graphic = c.renderer.symbol("triangle_5", d - h, e - h, 2 * h, 2 * h).attr(a).add(n);
break;
case 6: g.graphic = c.renderer.symbol("triangle_6", d - h, e - h, 2 * h, 2 * h).attr(a).add(n);
break;
case 7: g.graphic = c.renderer.symbol("triangle_7", d - h, e - h, 2 * h, 2 * h).attr(a).add(n);
break;
case 8: g.graphic = c.renderer.symbol("triangle_8", d - h, e - h, 2 * h, 2 * h).attr(a).add(n);
break;
}
}
} else if (k) g.graphic = k.destroy()
},

修改symbol方法,增加如下内容:

//风向设定
//正东
triangle_1: function(a, b, c, d) {
return ["M",a-c/2, b-c/2, "L", a-c/2, b+d, a+c+d, b+c/2 , "Z"]
},
//正西
triangle_2: function(a, b, c, d) {
return ["M", a-c , b+c/2, "L", a+c*2, b-c/2, a+c*2, b+c , "Z"]
},
//正南
triangle_3: function(a, b, c, d) {
return ["M",a-c/2, b, "L", a+c, b, a+c/3, b+c*2 , "Z"]
},
//正北
triangle_4: function(a, b, c, d) {
return ["M", a+c , b+c/2, "L", a-c/2, b+c/2, a+c/2, b-c*2 , "Z"]
},
//东南
triangle_5: function(a, b, c, d) {
return ["M", a, b, "L",a+c, b -c, a + d +c, b + d, "Z"]
},
//东北
triangle_6: function(a, b, c, d) {
return ["M", a, b, "L",a+c, b +c, a + d +c, b -d, "Z"]
},
//西南
triangle_7: function(a, b, c, d) {
return ["M", a+c*2 , b, "L", a-c/2, b+c, a+c, b-d , "Z"]
},
//西北
triangle_8: function(a, b, c, d) {
return ["M", a + c, b, "L", a - c, b - d, a, b + d, "Z"]
},

Highchart 改编风力风向图的更多相关文章

  1. echarts渲染一个风向图

    今天给大家说一个用echarts渲染一个风向图,这里图上其实有三个要素,风向,风级和能见度,主要还是讲讲代码里面的坑 1.风向图标方向修改以及设置 var ownData = echarts.util ...

  2. highchart柱状堆叠图动态数据请求

    $(function () { var options = { chart: { renderTo: 'indoor', type: 'column', }, title: { text: '室内问题 ...

  3. 毕设之Python爬取天气数据及可视化分析

    写在前面的一些P话:(https://jq.qq.com/?_wv=1027&k=RFkfeU8j) 天气预报我们每天都会关注,我们可以根据未来的天气增减衣物.安排出行,每天的气温.风速风向. ...

  4. arcgis制作风或水流速流向图

    制作风或水流速流向图 风速风向图或流速流向图相信大家都已经见过不少,但不知道有多少人会制作这样炫的专题图,下面这边文章向我们展示了当基本数据U和V矢量被存储时,怎样计算风或水流的速度和方向和对其进行符 ...

  5. 【开源】分享2011-2015年全国城市历史天气数据库【Sqlite+C#访问程序】

    由于个人研究需要,需要采集天气历史数据,前一篇文章:C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子),介绍了基本的采集思路和核心代码,经过1个星期的采集,历史数据库 ...

  6. Python爬取南京市往年天气预报,使用pyecharts进行分析

    上一次分享了使用matplotlib对爬取的豆瓣书籍排行榜进行分析,但是发现python本身自带的这个绘图分析库还是有一些局限,绘图不够美观等,在网上搜索了一波,发现现在有很多的支持python的绘图 ...

  7. C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子)

    第一次接触HtmlAgilityPack是在5年前,一些意外,让我从技术部门临时调到销售部门,负责建立一些流程和寻找潜在客户,最后在阿里巴巴找到了很多客户信息,非常全面,刚开始是手动复制到Excel, ...

  8. Cesium应用篇:2影像服务(下)

    文章中相关范例下载路径:https://yunpan.cn/cByQqkANWN7Pu 访问密码 823d 上篇主要介绍了Cesium自带的影像Provider ,在本篇中,我们主要涉及到如何扩展这些 ...

  9. XCL-Charts图表库简要教程及常见问题

    这个Andriod图表库项目从开始至现在,热情消耗几近殆尽.还好已基本实现我想做的那些东西.趁还剩下点兴趣,把一些点非常简单的归纳一下. 所支持的图表类型: 基类                   ...

随机推荐

  1. c++中参数传递和函数返回简析

    1.参数传递: 每次调用函数时,都会重新创建该函数所有的形参,此时所传递的实参将会初始化对应的形参.形参的初始化与变量的初始化一样. 非引用类型:如果形参具有非引用类型,则复制实参的值.普通的非引用类 ...

  2. iOS开发笔记:编译时出现的错误和解决办法

    1."std::ios_base::Init::~Init()", referenced from 出现这样的编译问题,是需要再加进libstdc++.dylib和libstdc+ ...

  3. CSS中链接文本为图片时的问题(塌陷、对应的图片建立倒角的问题)

    我在做Javascript DOM编程艺术的时候,在12章自己做练习时遇到了一个问题,<a>的内容<img>从<a>的盒子中溢出.代码如下: <a href= ...

  4. 剑指offier第4题

    /* 问题1:替换字符串,是在原来的字符串上做替换,还是新开辟一个字符串做替换! 问题2:在当前字符串替换,怎么替换才更有效率(不考虑java里现有的replace方法). 从前往后替换,后面的字符要 ...

  5. OpenGL绘制简单的时钟(首发测试)

    #include <windows.h> #include <GL/glut.h>//本来OpenGL程序一般还要包含<GL/gl.h>和<GL/glu.h& ...

  6. 监控mysql执行的sql语句

    linux平台 监控mysql执行的sql语句   为了做好配合开发做性能和功能测试,方便监控正在执行的sql语句, 可以在/etc/mysqld中添加如下:  log =/usr/local/mys ...

  7. uvalive 6888 Ricochet Robots bfs

    题目链接 给一个n*m的图, 图上有n个标号, n<=4, 然后有墙, 还有一个终点x. 每一步, 只能走某一个标号, 可以向四个方向走, 然后必须要碰到墙或者图的边界或者另一个标号才能停下来. ...

  8. 什么是JSON对象

    1.什么是json? JSON全称是JavaScript Object Notation,是一种轻量级的数据交换格式.JSON 与XML具有相同的特性,是一种数据存储格式,但是JSON相比XML 更易 ...

  9. 深入学习PE文件(转)

    PE文件是Win32的原生文件格式.每一个Win32可执行文件都遵循PE文件格式.对PE文件格式的了解可以加深你对Win32系统的深入理解. 一. 基本结构. 上图便是PE文件的基本结构.(注意:DO ...

  10. [置顶] PHP如何扩展和如何在linux底层对php扩展?

    虽然大部分php工程师都不需要知道php的C代码核心是如何运作的,有些人可能知道有个dl()函数.或者使用过一些第三方的类库,这些正是本文的重点之一.            希望对那些想把php带向更 ...