高分散散點圖的自定義標記（圓角的矩形）

Question

嗨我正在嘗試使用高分散散點圖的自定義標記。我正面臨一些問題

1. 我無法呈現圓角的矩形。我雖然變得簡單的矩形。
2. 如何將'w'和'h'參數傳遞給自定義標記函數？
3. 自定義標記如何獲取其默認參數？

這裏是我能夠實現到現在(Fiddle) 我想繪製標記就像

相關代碼

<script> 
    $(document).ready(function(){ 

     var yAxisSeries  = [9.2,7.6,9.6,4.7,9.6,{y:54.4, fillColor:'#FF0000'}]; 
     var xAxisCategories = ['speech1','speech2','speech3','speech4','speech5','speech6']; 
     // Define a custom symbol path 
    Highcharts.SVGRenderer.prototype.symbols.pointer = function (x, y, w, h) { 
     return ['M', x, y, 
       'L',x,y-h,x+w,y-h,x+w,y, 
       'L',x+w,y+h,x,y+h,x,y, 
       'z']; 

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


     var chartOptions = { 
      chart: { 

      }, 

      plotOptions: { 
       series: { 
       pointWidth: 20 
      }, 
      column: { 
       pointPlacement: 'on', 
       clip   :false, 
       pointWidth :'30' 
      } 
     }, 
      credits: { 
       enabled: false 
      }, 
      title: { 
       text: '' 
      }, 
      subtitle: { 
       text: '' 
      }, 
      xAxis: [{ 
         gridLineWidth: 2, 
         lineColor: '#000', 
         tickColor: '#000', 
         gridLineDashStyle:'ShortDash', 
         categories:xAxisCategories, 
         gridLineColor:'#000', 
         tickmarkPlacement:'on' 
        }], 
      yAxis: [{ // Primary yAxis 
         gridLineWidth: 1, 
         allowDecimals : true, 
         gridLineDashStyle:'ShortDash', 
         gridLineColor:'#9ACD9D', 
         labels: { 
           style: { 
            color: '#9ACD9D' 
           } 
           }, 
        }], 

      legend: { 
         align: 'left', 
         x: 120, 
         verticalAlign: 'top', 
         y: 100, 
         floating: true, 
         backgroundColor: '#FFFFFF' 
        }, 
      series: [{ 
         name: '', 
         color: '#89A54E', 
         type: 'scatter', 
         data: yAxisSeries, 
          marker: { 
           fillColor: 'red',       
           symbol: 'pointer',    
         }, 
         tooltip: { 
          valueSuffix: '' 
         }, 
         showInLegend:false 
       }] 
     }; 
$('#test').highcharts(chartOptions); 

    }) 

</script> 
<div id="test" style='width:700px'></div> 

任何建議，將有助於

Answer 1

您正在使用路徑渲染矩形，那麼你就是d手動設置圓角，閱讀有關SVG路徑：http://www.w3.org/TR/SVG11/paths.html#PathDataCurveCommands

工作演示：http://jsfiddle.net/56Nh9/1/

Highcharts.SVGRenderer.prototype.symbols.pointer = function (x, y, w, h) { 
    return ['M', x, y, 
      'C',x,y-h,x+w,y-h,x+w,y, 
      'C',x+w,y+h,x,y+h,x,y, 
      'z']; 

}; 

width和height從radius計算值，請參見：http://jsfiddle.net/56Nh9/2/