Question

所以我的highcharts系列中需要这个标记。

反正我能做到吗？

Answer 1

是的，您可以在Highcharts中完成。

您需要找到用于标记的图像并将其设置为系列数据：Set marker image
要自定义工具提示，请在此处查看：Tooltips formatter
您需要将系列设置为隐藏标记，并仅在将其悬停在Show marker on hover

我在这里做了一个直播示例，希望对您有所帮助：Example

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Highcharts.chart('container', {
     chart: {
         backgroundColor: "#000"
     },
     tooltip: {
         positioner: function(boxWidth, boxHeight, point) {         
             return {
                 x:point.plotX + boxWidth / 2 ,
                 y:point.plotY + boxHeight / 2 + 20
             };         
         },
        formatter: function () {
            return ' <b>' + this.x + '</b>';
        },
        borderColor: '#14aaa0',
        backgroundColor: '#14aaa0',
        borderRadius: 9,
        style: {
            color: '#fff'
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        marker: {
            symbol: "url(https://i.imgur.com/akecE8I.png)"
        }
    }]
});

Answer 2

您可以添加自定义标记来实现：

Highcharts.SVGRenderer.prototype.symbols.custom = function(x, y, width, height) {
  var w = width / 2,
    h = height / 2,
    space = 1.5,
    inner, outer;

  inner = this.arc(x + w, y + h, w - space * 2, h - space * 2, {
    start: Math.PI * 0.5,
    end: Math.PI * 2.5,
    open: false
  });

  outer = this.arc(x + w, y + h, w - space, h - space, {
    start: Math.PI * 0.5,
    end: Math.PI * 2.5,
    innerR: w,
    open: false
  });

  return outer.concat(inner);
};

并像这样使用它：

plotOptions: {
  series: {
    marker: {
      symbol: 'custom',
      radius: 7
    }
  }
}

演示：

https://jsfiddle.net/BlackLabel/n4u3196f/

API参考：

https://api.highcharts.com/highcharts/series.line.marker.symbol

如何在图表中实现这种标记？

2 个答案: