Highchart 改编风力风向图

基于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"]
            },
时间: 2024-10-13 01:23:47

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

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

$(function () { var options = { chart: { renderTo: 'indoor', type: 'column', }, title: { text: '室内问题' }, xAxis: { categories: ['MR弱覆盖楼宇', '高2无4', '2G高倒挂', '投诉', '保障需求', '市场需求'], labels: { rotation:0 } }, yAxis: { max: 1000, min: 0, title: { text: ''

[原创.数据可视化系列之七]阿里竞赛作品技术展示

今年9月份,数据秀(dataxiu.com)团队参与阿里和国家公共气象服务中心主办,浙江大学和阿里云承办的“公益云图数据可视化创新大赛”. “公益云图数据可视化创新大赛”将融合开放气象.空气质量监测.企业排放和公共环境等领域的数据的,基于阿里云天池大数据平台开发一批关注环境公益的可视化技术,借助阿里云的计算能力及可视化工具,挖掘复杂异构多源数据之间的关联关系,以数据可视化的方式呈现给决策者和公众,共同促进环境治理和绿色产业创新. 数据秀团队开发的“公益云图”作品使用了美国国家环境预报中心GFS(

第4章 传感器相关的技术

传感器相应技术 4.1 传感器 4.1.1感知能力与传感器的发展 人的感知能力 眼.耳.鼻.舌.皮肤是人类感知外部物理世界的重要感官.我们用手接触物体来知道物体时热是凉:用手提起一个物体来判断出他大概有多重:用眼睛可以快速的从教室的很多学生中找出班长:用舌头可以尝出实物的酸甜苦辣:用鼻子可以闻出各种气味.人类史通过视觉.味觉.听觉.嗅觉.触觉五大感官来感知周围的环境,这是人类认识世界的基本途径.人类具有非常智慧的感知能力.我们可以综合视觉.味觉.听觉.嗅觉.触觉等多种手段感知的信息,来判断我们周

中国天气网接口类(中国天气预报)

新写的中国天气网api接口类,分享给大家(妈妈再也不用担心我出门被天气君欺负了). 只需修改两个参数($private_key.$appid)即可使用,这两个参数从中国天气网获取,地址是; http://openweather.weather.com.cn/ 以下是类及使用示例 <?php /** * 中国天气网天气API接口类 * 获取中国天气网天气数据,接口申请地址:http://openweather.weather.com.cn/ * Copyright (c) 2014-2015 ht

利用python 进行数据清洗

import pandas as pd data.to_csv("路径",encoding=utf-8) 保存文件 data.head() 查看前几行 data.tail() 查看后几行 data.shape 几行几列 data.index 查看索引 data.columns 查看标题 data.values 查看值 data.info 查看整体结构 data.describe() 对数值型数据进行描述统计 data.value_counts()对值计数 data.sort_index

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

转自原文C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子) 阅读目录 1.HtmlAgilityPack简介 2.XPath技术介绍与使用 3.采集天气网站案例 4.资源 第一次接触HtmlAgilityPack是在5年前,一些意外,让我从技术部门临时调到销售部门,负责建立一些流程和寻找潜在客户,最后在阿里巴巴找到了很多客户信息,非常全面,刚开始是手动复制到Excel,是真尼玛的累,虽然那个时候C#还很菜,也想能不能通过程序来批量获取(所以平时想法要多才好).几

[转]地图投影

1.地球椭球体     地球是一个表面很复杂的球体,人们以假想的平均静止的海水面形成的“大地体”为参照,推求出近似的椭球体,理论和实践证明,该椭球体近似一个以地球短轴为轴的椭园而旋转的椭球面,这个椭球面可用数学公式表达,将自然表面上的点归化到这个椭球面上,就可以计算了.下面列举了一些常用的一些椭球及参数:1)海福特椭球(1910) 我国52年以前采用的椭球 a=6378388m b=6356911.9461279m α=0.336700336702)克拉索夫斯基椭球(1940 Krassovsk

教学细节介绍

束老师高中数学辅导内容展示 对于高考数学而言,解决了以下三个问题,得高分将易如反掌.一是对于基本概念(包括定理.定义.性质.公式等,以下简称为"基本概念")的深刻理解和掌握.二是拿到一道题之后应该如何思考,从而用上我们的基本概念去解决问题.三是一些考试技巧的运用. 束老师就是帮助学生解决这三个问题! 1. 在基本概念的教学中,主要通过"条件与结论""自然语言.符号语言.图形语言的相互转换""具体化""正用.逆用.变形

Android开源图表库XCL-Charts版本号公布及展示页

XCL-Charts V2.1 Android开源图表库(XCL-Charts is a free charting library for Android platform.) XCL-Charts基于原生的Canvas来绘制各种图表,在设计时,尽量在保证开发效率的同一时候,给使用者提供足够多的定制化能力. 因此使用简便,同一时候具有相当灵活的定制能力. 眼下支持(3D/非3D,背向式)柱形图(Bar Chart).3D/非3D饼图(Pie Chart).堆叠图(Stacked Bar Cha