2017-07-02 58 views
0

如何隱藏在highcharts復位變焦按鈕始終。我有用於放大和縮小的自定義按鈕。如何始終隱藏高圖中的重置縮放按鈕。我有用於放大和縮小的自定義按鈕。如何始終隱藏高圖中的重置縮放按鈕。我有用於放大和縮小的自定義按鈕。如何始終隱藏高圖中的重置縮放按鈕。我有用於放大和縮小的自定義按鈕。 $(函數(){ /** * A Highcharts插件在圖表的 *邊界框外部的單獨的容器顯示工具提示的,所以它可以利用在頁面中所有可用的空間。 */Highcharts - 隱藏復位變焦按鈕總是

(function(H) { 
    H.wrap(H.Tooltip.prototype, 'getLabel', function(proceed) { 

     var chart = this.chart, 
      options = this.options, 
      chartRenderer = chart.renderer, 
      box; 

     if (!this.label) { 

      this.renderer = new H.Renderer(document.body, 400, 500); 
      box = this.renderer.boxWrapper; 
      box.css({ 
       position: 'absolute', 
       top: '-9999px' 
      }); 
      chart.renderer = this.renderer; 
      proceed.call(this, chart, options); 
      chart.renderer = chartRenderer; 

      this.label.attr({ 
       x: 0, 
       y: 0 
      }); 
      this.label.xSetter = function(value) { 
       box.element.style.left = value + 'px'; 
      }; 
      this.label.ySetter = function(value) { 
       box.element.style.top = value + 'px'; 
      }; 
     } 
     return this.label; 
    }); 

    H.wrap(H.Tooltip.prototype, 'getPosition', function(proceed, boxWidth, boxHeight, point) { 
     var chart = this.chart, 
      chartWidth = chart.chartWidth, 
      chartHeight = chart.chartHeight, 
      pos; 
     point.plotX += this.chart.pointer.chartPosition.left; 
     point.plotY += this.chart.pointer.chartPosition.top; 

     // Temporary set the chart size to the full document, so that the tooltip positioner picks it up 
     chart.chartWidth = $(document).width(); 
     chart.chartHeight = $(document).height(); 

     // Compute the tooltip position 
     pos = proceed.call(this, boxWidth, boxHeight, point); 

     // Reset chart size 
     chart.chartWidth = chartWidth; 
     chart.chartHeight = chartHeight; 

     return pos; 
    }); 

    /** 
    * Find the new position and perform the move. This override is identical 
    * to the core function, except the anchorX and anchorY arguments to move(). 
    */ 
    H.Tooltip.prototype.updatePosition = function(point) { 
     var chart = this.chart, 
      label = this.label, 
      pos = (this.options.positioner || this.getPosition).call(
       this, 
       label.width, 
       label.height, 
       point 
      ); 

     // do the move 
     this.move(
      Math.round(pos.x), 
      Math.round(pos.y || 0), // can be undefined (#3977) 
      point.plotX + chart.plotLeft - pos.x, 
      point.plotY + chart.plotTop - pos.y 
     ); 
    }; 

}(Highcharts)); 


    let data = [{ 
     values: [ 
      1.0, 
      0.0 
     ], 
     name: "#1" 
    }, { 
     values: [ 
      0.0, -1.0 
     ], 
     name: "#2" 
    }, { 
     values: [ 
      0.0, 
      0.0 
     ], 
     name: "#3" 
    }, { 
     values: [-1.0, 
      0.0 
     ], 
     name: "#4" 
    }, { 
     values: [ 
      0.0, 
      0.0 
     ], 
     name: "#5" 
    }]; 
    let chart = Highcharts.chart('container', { 
     chart: { 
      type: 'line', 
      height: 45, 
      style: { 
       overflow: 'visible' 
      } 
     }, 
     xAxis: { 
      minPadding: 0.000, 
      maxPadding: 0.000, 
      startOnTick: false, 
      endOnTick: false, 
      tickWidth: 0, 
      gridLineWidth: 0, 
      lineWidth: 0, 
      labels: { 
       enabled: false 
      }, 
      title: { 
       text: null 
      } 
     }, 
     yAxis: { 
      minPadding: 0.001, 
      maxPadding: 0.001, 
      gridLineWidth: 0, 
      lineWidth: 0, 
      labels: { 
       enabled: false 
      }, 
      title: { 
       text: null 
      } 
     }, 
     lang: { 
      noData: 'No data' 
     }, 
     credits: { 
      enabled: false 
     }, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     title: { 
      text: '' 
     }, 
     tooltip: { 
      shared: true 
     }, 
     plotOptions: { 
      series: { 
       marker: { 
        enabled: false 
       } 
      } 
     }, 
     series: [{ 
      data: [] 
     }] 

    }); 
    data.forEach((seriesData) => { 
     chart.addSeries({ 
      name: seriesData.name, 
      data: seriesData.values 
     }); 
    }); 
}); 

回答

0

你可以擴展至Chart.showResetZoom沒有本質上不執行功能在所有繪製按鈕例如(JSFiddle):

(function (H) { 
    H.wrap(H.Chart.prototype, 'showResetZoom', function (proceed) { 
    }); 
}(Highcharts)); 
+0

謝謝你這麼多Halvor這就是我究竟在尋找!!! – Martin

+0

我還有一個問題。如果可能的話,請幫助。我可以在點擊自定義縮小按鈕時調用zoomOut()。但如果我點擊放大縮小自定義按鈕縮放(),它不工作。我確實看到了highcharts源代碼中定義的zoom()。我對這個功能的理解是錯誤的嗎?請指導 – Martin

+0

'zoom'函數採用mouseevent並使用它的屬性來確定放大的位置。你將不得不以某種方式指定放大的地方。參見[這個小例子](http://jsfiddle.net/owLb9q8t/1/)作爲例子,但更詳細的我會問一個單獨的問題。 –