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

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单击模式栏。

zoom-functions-example.js

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

用于隐藏模式栏的CSS：

.modebar-container{
  display: none;
}