动态旋转dataLabels图标/ glyhps

Question

我正在绘制各种天气数据类型，并使用Erik Flower的天气图标字体集的风箭（.wi-wind，\ u0b1）图标来表示风向。我试图在没有成功的情况下根据方向旋转它们。他提供了一个可以处理轮换的样式表，但我不认为这适用于高级图表。

Wind dir是在单个轴上绘制的散点图，高度为0，因此它们都水平排列。当我通过dataLabel.attr({ rotation: point.y });循环中的$.each()向dataLabel符号应用旋转时，它们会旋转，但最终会变为波浪状而不是水平线。我确定这是由于SVG旋转原点，但我无法弄清楚这一点。有什么帮助吗？

-B -

---编辑---

这是指向正在进行的图片示例的链接。两行都表现出问题，两者都使用相同的字体/图标。顶部是风速轴上的第二轴，显示散点图的数据标签，然后基于方向旋转（这个没有应用180度调整）。较低的是风速的样条图上的标记，它们根据方向旋转。

alignment probs with rotated wind symbols

以下代码段包括两组符号的旋转/翻译尝试。我只拉了相关的线。风速为4级，方向为5级。

＆＃13;

＆＃13;

// set wind speed data markers to symbols for direction, open circle with arrow point
//
// markers on spline
//
     	chart.get('windS').update({
     	    marker: {
                symbol: 'text:\uf0b1'
            },   
     		tooltip: {
     			pointFormatter: function() {
                   return '<span style="color:' + this.color +'">\u25CF</span> wind: <b>' + this.y + ' kts at ' + 
                          chart.get('windD').yData[this.index] + '°</b><br/>';
                }
     		}
     	});

     	
     	// rotate the wind direction symbos to match the direction
     	$.each(chart.series[4].data, function(i, point) {
            this.graphic
//                .translate(-5, 5) // centers symbol on line
                .attr({
                	// rotate symbol
                	// it's rotating at (0, 0) of the symbol's layout 20x36 rectangle
                    rotation: windIconDirection(chart.series[5].data[i].y),
//                     translateX: this.graphic.element.attributes.x,
//                     translateY: this.graphic.element.attributes.y
                });
        });
     	

//
// data labels, not spline plot
//
        // adjust position of wind speed symbols
//         $.each(chart.series[4].data, function(i, point) {
//         	this.dataLabel.attr({
//                 translateY: -16
//             })
//             .css({
//             });
//         });
        $.each(chart.series[5].data, function(i, point) {
        	this.dataLabel.attr({
        		rotation: point.y
        	});
        });

＆＃13;

＆＃13;

＆＃13;