Highcharts graph graph, custom marker

Question

У меня есть серия пузырей, в которой я хочу использовать одну точку в одной серии в качестве настраиваемого маркера. Маркер может быть звездой, созданной на основе реализации SVG HighCharts (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/

Для изображения, изменять размер, так что ж и ч равна радиусу, если бы это было правдой пузырь. Для звезды 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/