javascript - Highcharts：在倒置图表中禁用标记旋转

Question

我有一个用 highcharts.js 创建的图表，其中轴是倒置的（y 是水平的，x 是垂直的）。在图表中，我有几个图，一个是带有图片作为标记的散点图。我遇到的问题是，当图表反转时，标记默认旋转 90 度。有没有办法让标记不被旋转轴倒置的图表？

Answer 1

这是我能想到的最好的......

function rotateMarker()
{
    $.each( $('.highcharts-markers').children(), function(){
        var marker = $(this);
        // rotate 90 degrees around the middle point of the marker
        var rotateAttr = 'rotate(90,'+(parseFloat(marker.attr('x'))+parseFloat(marker.attr('width'))/2)+','+marker.attr('y')+')';
        marker.attr('transform',rotateAttr);
    });
}

下一个问题是在绘图完全渲染之前您不能运行此代码。对于 highcharts 动画，我不得不将其设置为 setTimeout。

在这里看小提琴。

回应评论

我最初使用的是从左到右相同的图像。对于“镜像”问题，您可以旋转 270 度，使其与原来的方向相同吗？

在此处查看更新的小提琴。

Answer 2

var markers= document.getElementsByClassName("highcharts-markers");
for(var i= 0; i< markers.length; i++) {
  var items= markers[i].childNodes;
    for(var j= 0; j< items.length; j++) {
      var bbox= items[j].getBBox(); var cx= bbox.x+ bbox.width/2; var cy= bbox.y+ bbox.height/2;
      items[j].setAttribute("transform", "rotate(90" + ", " + cx + ", " + cy + ")");
    }
  }
}