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上。

请参阅小提琴here。

对评论的回应

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

请参阅更新的小提琴here。

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 + ")");
    }
  }
}

Highcharts：禁用倒置图表中的标记旋转

2 个答案: