更改按鈕圖像

我已經創建了一個新的自定義按鈕，可以設置不同的背景圖像而不是「圓形」或「三角形」？更改按鈕圖像

感謝察南

 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; 
         } 
        } 
       } 
      },

來源

2013-03-10 Chanan Berler

按照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]} 
});

產地：

enter image description here

小提琴here。

來源

2013-03-10 21:06:37 Mark

感謝的能力，我通過增加點擊圖像 – 2013-03-11 09:02:58

出色答卷工作的問題！你救了我的一天。 – 2018-01-26 13:25:17

你必須設置的圖像作爲圖標

http://jsfiddle.net/Udgb3/

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

來源

2013-03-12 12:03:23

謝謝，這是我需要的 – user1011138 2013-05-07 10:16:34

更改按鈕圖像

回答

相關問題