Highcharts 气泡图，自定义标记

Question

我有一个气泡系列，我想在一个系列中使用一个点作为自定义标记。标记可以是基于 HighCharts 的 SVG 实现（5 点星）呈现的星形，也可以是 URL 图像。

https://assets.mypatentideas.com/images/fiddle/star.png

 series: [{
            //  color: 'red',

         data: [                    
                { x: -0.95, y: 0.54, z: 0.93},
                { x: -0.15, y: 0.14, z: 1,   marker: {
                symbol: 'star'
            }}   

            ]
        },
        {
            //  color: 'red',
            data: [
                { x: 0.95, y: -0.54, z: 0.93},
                { x: 0.15, y: -0.14, z: 1,   marker: {
                symbol: 'starimage'
            } },


            ]
        }]

这里介绍一下思路：

https://jsfiddle.net/mshaffer/kx62dztf/

对于图像，调整大小以使 w 和 h 等于半径（如果它是真正的气泡）。对于 SVG 星星，渲染星星的半径（中心到任意点）与气泡半径相同。

也许明星需要有自己的系列，这很好。

一些相关的参考资料： https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3913511-allow-for-custom-symbols-when-using-bubble-chart 从http://www.highcharts.com/demo/renderer指向http://jsfiddle.net/highcharts/un9faeed/和http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/renderer/

Answer 1

uservoice 中的代码（允许气泡使用不同的符号）可以与the demo with custom markers 中的代码结合使用。您需要定义自己的形状，然后您可以将其用作标记符号。

  Highcharts.SVGRenderer.prototype.symbols.star = function(x, y, w, h) {
return [
  'M', x, y + 0.4 * h,
  'L', x + 0.35 * w, y + 0.35 * h,
  'L', x + 0.5 * w, y,
  'L', x + 0.65 * w, y + 0.35 * h,
  'L', x + w, y + 0.4 * h,
  'L', x + 0.75 * w, y + 0.65 * h,
  'L', x + 0.85 * w, y + h,
  'L', x + 0.5 * w, y + 0.8 * h,
  'L', x + w * 0.15, y + h,
  'L', x + 0.25 * w, y + 0.65 * h,
  'Z'
];
};

if (Highcharts.VMLRenderer) {
Highcharts.VMLRenderer.prototype.symbols.star = Highcharts.SVGRenderer.prototype.symbols.star;
}

示例：http://jsfiddle.net/un9faeed/3/

示例：https://jsfiddle.net/kx62dztf/2/