Question

你将如何实现this (jsFiddle link) 动态地为Highcharts“活动量表”，所以很明显它在那里工作，但我不得不手动确定正确的x＆amp; y标签的坐标。

这个结果类似于使用柱形图的“内部”属性，但似乎没有内置像这种图表类型（我至少遇到过）。可以通过传递与每个系列相同的y值作为y轴上的刻度标记（参见下面的代码片段）并除去除数字之外的所有标记，然后我不能错开那些正确定位在每个系列中，以及dataLabel x＆amp; y方法我不知道能够通过回调动态地根据系列y值定位标签的公式。

        yAxis: {
        labels: {
            enabled: true,
            x: 10, y: -15,
            format: '{value} %',
            style: {
                fontSize: 16,
                color: 'black'
            }
        },
        min: 0,
        max: 100,
        gridLineColor: 'transparent',
        lineColor: 'transparent',
        minorTickLength: 0,
        //tickInterval: 67, 
        tickPositions: [50, 65, 80], //TRIED TO USE Y-AXIS LABELS BUT COULDN'T STAGGER THEM 
        tickColor: '#000000',
        tickPosition: 'inside',
        //tickLength: 50,
        tickWidth: 0
    },

任何帮助都会非常感谢，提前谢谢。

Answer 1

通过Highcharts支持论坛解决： fiddle ，只需在图表加载和重绘事件上调用以下函数：

  function redrawConnectors() {
var chart = this,
  cX, cY,
  shapeArgs, ang, posX, posY, bBox;

Highcharts.each(chart.series, function(series, j) {
  Highcharts.each(series.points, function(point, i) {
    if (point.dataLabel) {
      bBox = point.dataLabel.getBBox();
      shapeArgs = point.shapeArgs;
      cX = shapeArgs.x,
        cY = shapeArgs.y,
        ang = shapeArgs.end;
      posX = cX + shapeArgs.r * Math.cos(ang);
      posY = cY + shapeArgs.r * Math.sin(ang);

      point.dataLabel.attr({
        x: posX - bBox.width / 2,
        y: posY - bBox.height / 2
      });
    }
  });
});

}

结束时使用DataLabel的Highcharts Multiseries Gauge

1 个答案: