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

Posted

技术标签:

【中文标题】如何使用在单击按钮上创建的用户触发放大和缩小绘图图表?【英文标题】:How to trigger zoom in and zoom out in plotly chart using user created on click buttons? 【发布时间】:2020-05-06 02:21:50 【问题描述】:

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

.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);

【问题讨论】:

请添加您现有的代码,为用户提供一个起点。 @sfarbota 我已经添加了 .ts 文件代码。 您无法触发原生 Plotly 事件,但您可以为图表提供新的 X 和 Y 范围并应用 Plotly.relayout。你的用户不能用鼠标放大吗? 是的,我只是这样做的。 @马克 【参考方案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;

【讨论】:

以上是关于如何使用在单击按钮上创建的用户触发放大和缩小绘图图表?的主要内容,如果未能解决你的问题,请参考以下文章

winform窗体的实现单击按钮实现图片放大缩小

如何在 react-native-map 中放大/缩小?

CAD图形的缩放——视区缩放教程

WPS中的图像的放大缩小效果怎样做

缩放用户上传的图像 onclick 按钮

Vue转换未在按钮单击时触发