Svg 动态旋转数据标签图标/GLYHP

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

Wind dir是在单个轴上绘制的散点图，高度为0，因此它们都水平排列。当我通过

dataLabel.attr（{rotation:point.y}）对dataLabel符号应用旋转时

在

$循环中。每个（）

循环都会旋转，但最终都是波浪形的，而不是沿着水平线。我确信这是由于SVG的旋转原点造成的，但我无法理解这一点。有什么帮助吗

-B-

---编辑---

这里有一个链接，指向正在发生的事情的图像示例。两行都显示问题，都使用相同的字体/图标。顶部是风速轴上的第二个轴，显示散点图的数据标签，然后根据方向旋转散点图（该散点图未应用180度调整）。下方是风速样条曲线图上的标记，这些标记基于方向旋转

下面的代码段包括两组符号的旋转/平移尝试。我只是拉了相关的线。风速为系列4，风向为5

//将风速数据标记设置为方向符号，用箭头点打开圆圈
//
//样条曲线上的标记
//
chart.get（'windS'）。更新({
标记：{
符号：“文本：\uf0b1”
},   
工具提示：{
pointFormatter:函数（）{
返回'\u25CF风：'+this.y+'kts在'+
chart.get（'windD'）.yData[this.index]+'°
；
}
}
});
//旋转风向符号以匹配风向
$.each（chart.series[4]。数据，函数（i，点）{
这是我的照片
//.translate（-5，5）//将符号居中于第行
艾特先生({
//旋转符号
//它在符号布局20x36矩形的（0,0）处旋转
旋转：windIconDirection（chart.series[5].数据[i].y），
//translateX:this.graphic.element.attributes.x，
//translateY:this.graphic.element.attributes.y
});
});
//
//数据标签，而不是样条曲线图
//
//调整风速符号的位置
//$.each（chart.series[4]。数据，函数（i，点）{
//此文件为.dataLabel.attr({
//translateY:-16
//             })
//.css({
//             });
//         });
$.each（chart.series[5]。数据，函数（i，点）{
此文件为.dataLabel.attr({
旋转：点y
});
});以堆栈片段或JSFIDLE的形式向我们展示您在使用示例时所做的操作。让我们了解您的图表的外观。同时检查我们的演示旋转风符号。