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

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

缩放函数示例.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;
}