Highcharts氣泡圖，自定義標記

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/