javascript - 如何使用在单击按钮上创建的用户触发放大和缩小绘图图表？

Question

我正在构建一个 Angular 应用程序。我们需要在其中创建用于放大和缩小绘图图表的单击按钮。我们可以使用可悬停模式栏上的按钮放大缩小图表，但这不是我们的应用程序所必需的。我们希望使用在单击按钮上创建的用户来放大和缩小图表。有没有办法使用点击按钮触发可悬停模式栏放大和缩小的操作？如果没有，那么其他方法是什么？任何建议表示赞赏。

Code in .ts file

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