zoukankan      html  css  js  c++  java
  • 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 ? {
                     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"]
                },
  • 相关阅读:
    node.js 实际应用记录
    常用数组操作方法 包含es6语法
    JavaScript获取获取屏幕、浏览器窗口 ,浏览器,网页高度、宽度方法汇总
    vue-cli脚手架发布项目进行build压缩时遇到的问题
    路由传参
    vue 点击新的路由<router-link to=‘’></router-link>时 同时嵌套一个新网页
    vue-cli 里 利用mockjs 实现模拟后台数据并成功请求
    vue2.0 实现click点击当前li,动态切换class
    vue 动态获取浏览器内容高度并赋值给元素
    在vue中给列表中的奇数行添加class
  • 原文地址:https://www.cnblogs.com/fxfly/p/4642327.html
Copyright © 2011-2022 走看看