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"] },