Question

我有一个泡泡系列，我想在一个系列中使用一个点作为自定义标记。标记可以是基于HighCharts（5点星）的SVG实现或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://jsfiddle.net/highcharts/un9faeed/

中的http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/renderer/和http://www.highcharts.com/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/

Highcharts气泡图，自定义标记

1 个答案: