javascript - 用于 Highcharts 散点图的自定义标记(带圆 Angular 的矩形)

Question

您好，我正在尝试将自定义标记与 highchart 散点图一起使用。我遇到一些问题

1. 我无法渲染带有圆 Angular 的矩形。不过我得到的是简单的矩形。
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

您正在使用路径渲染矩形，那么您需要手动设置圆 Angular ，请阅读有关 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'];

};

宽度和高度是根据半径计算的值，请参阅:http://jsfiddle.net/56Nh9/2/