如何使用用戶在點擊按鈕上創建的圖表觸發放大和縮小？

Question

我正在構建一個角度應用程序。 我們需要在其中創建用於放大和縮小繪圖圖表的單擊按鈕。 我們可以使用可懸停模式欄上的按鈕放大縮小繪圖圖表，但這不是我們的應用程序所必需的。 我們想使用用戶在單擊按鈕上創建的來放大和縮小圖表。 有沒有辦法使用點擊按鈕觸發可懸停模式欄放大和縮小的操作？ 如果不是，那么其他方法是什么？ 任何建議表示贊賞。

.ts文件中的代碼

basicChart() {

    var trace1 = {
        x: ['2020-10-04', '2021-11-04', '2023-12-04'],
        y: [90, 40, 60],
        type: 'scatter'
    };

    var data = [trace1];

    var layout = {
        title: 'Chart',
        showlegend: false
    };

    Plotly.newPlot('myDiv', data, layout);
}

Answer 1

我遇到了同樣的問題，最終只使用 DOM 來單擊模式欄。

縮放功能-example.js

const plot = Plotly.newPlot('myDiv', data, layout)
let zoomIn = function(plot){
  plot.querySelector('a[data-attr="zoom"][data-val="in"]').click()
},
let zoomOut = function(plot){
  plot.querySelector('a[data-attr="zoom"][data-val="out"]').click()
},
let resetView = function(plot){
  plot.querySelector('a[data-attr="zoom"][data-val="reset"]').click()
},

CSS 隱藏模式欄：

.modebar-container{
  display: none;
}