更改按钮图像

Question

我创建了一个新的自定义按钮，我可以设置不同的背景图片而不是“圆圈”或“三角形”吗？

感谢 察南

        exporting: {
        enabled: true,
            buttons: {
                'realTimeButton': {
                id: 'realTimeButton',
                    symbol: 'diamond',
                    x: -88,
                    symbolFill: realTimeColor,
                    hoverSymbolFill: realTimeColor,
                    _titleKey: "realTimeButtonTitle",
                    onclick: function(event) {
                      // handle change to real time
                      if ( enable_lastRoundsChart_realtime )
                      {
                         // disable real time flag
                         enable_lastRoundsChart_realtime = 0;

                         // re-create detail in real time mode disabled
                         createDetail(cache_last_rounds.last_rounds_data, window.show_top_round_ids);

                         // enable plotBand
                         if ( pb_master_chart )
                         {
                            pb_master_chart.options.chart.events.selection.enabled = 'true';
                            pb_master_chart.options.chart.zoomType = 'x';
                          }
                    }
                    else
                    {
                        // enable real time flag
                        enable_lastRoundsChart_realtime = 1;

                        // re-create detail in real time mode enabled
                        createDetail(cache_last_rounds.last_rounds_data, window.show_top_round_ids);

                        // update title
                        this.setTitle({text:"Players/Drops Per Round"}, {text:"Real Time"});

                        // if master found, remove plotBand and disable master selection
                        if ( pb_master_chart )
                        {
                            // remove plotBand
                            pb_master_chart.xAxis[0].removePlotBand('mask-before');
                            pb_master_chart.xAxis[0].removePlotBand('mask-after');
                            pb_master_chart.xAxis[0].addPlotBand({
                                id: 'mask-before',
                                from: -1,
                                to: 99999,
                                color: 'rgba(0, 0, 0, 0.2)'
                            })

                            // disable selection
                            pb_master_chart.options.chart.events.selection.enabled = 'false';
                            pb_master_chart.options.chart.zoomType = null;
                        }
                    }
                }
            },

Answer 1

根据docs，形状在Highcharts.Renderer.symbols集合中定义。检查此对象会显示以下可用形状：

Highcharts.Renderer.prototype.symbols:
  arc: function (a,b,c,d,e){var f=e.start,c=e.r||c||d,g=e.end-1.0E-6,d=e.innerR,h=e.open,i=W(f),j=Z(f),k=W(g),g=Z(g),e=e.end-f<Aa?0:1;return["M",a+c*i,b+c*j,"A",c,c,
  circle: function (a,b,c,d){var e=0.166*c;return["M",a+c/2,b,"C",a+c+e,b,a+c+e,b+d,
  diamond: function (a,b,c,d){return["M",a+c/2,b,"L",a+c,b+d/2,a+c/2,b+d,a,b+d/2,"Z"]}
  exportIcon: function (a,b,c,d){return y(["M",a,b+c,"L",a+c,b+d,a+c,b+d*0.8,a,b+d*0.8,"Z","M",a+c*0.5,b+d*0.8,"L",a+c*0.8,b+d*0.4,a+c*0.4,b+d*0.4,a+c*0.4,b,a+c*0.6,b,a+c*0.6,b+d*0.4,a+c*0.2,b+d*0.4,"Z"])}
  printIcon: function (a,b,c,d){return y(["M",a,b+d*0.7,"L",a+c,b+d*0.7,a+c,b+d*0.4,a,b+d*0.4,"Z","M",a+c*0.2,b+d*0.4,"L",a+c*0.2,b,a+c*0.8,b,a+c*0.8,b+d*0.4,"Z","M",a+c*0.2,b+d*0.7,"L",a,b+d,a+
  square: function (a,b,c,d){return["M",a,b,"L",a+c,b,a+c,b+d,a,b+d,"Z"]}
  triangle: function (a,b,c,d){return["M",a+c/2,b,"L",a+c,b+d,a,b+d,"Z"]}
  triangle-down: function (a,b,c,d){return["M",a,b,"L",a+c,b,a+c/2,b+d,"Z"]}

您还可以通过扩展集合来添加自己的符号。例如，绘制一个简单的X：

$.extend(Highcharts.Renderer.prototype.symbols, {
    anX: function (a,b,c,d){return["M",a,b,"L",a+c,b+d,"M",a+c,b,"L",a,b+d]}
});

产地：

小提琴here。

Answer 2

您可以将图像设置为图标

http://jsfiddle.net/Udgb3/

 symbol: 'url(http://highcharts.com/demo/gfx/sun.png)',
                symbolX:5,
                symbolY:0