chart.js - Chartjs 中的重置缩放

Question

我需要帮助。我遵循了本教程 https://www.dyclassroom.com/chartjs/chartjs-how-to-draw-line-graph-using-data-from-mysql-table-and-php .我设法启动了 chartjs-plugin-zoom。现在我想添加按钮“重置缩放”我休假了这个教程: Add zoom event handler to charts for chartjs with chartjs-plugin-zoom

但是当我在 app.js 中的 $.ajax({}); 之后添加时

$('#reset_zoom').click(function() {
     mycanvas.resetZoom();
})

然后按下按钮显示错误:

app.js:131 Uncaught TypeError: mycanvas.resetZoom is not a function
    at HTMLButtonElement.<anonymous> (app.js:131)
    at HTMLButtonElement.dispatch (datatables.min.js:15)
    at HTMLButtonElement.r.handle (datatables.min.js:15)

你能给我一个建议吗？

Answer 1

有点惊讶这个问题还没有得到解答。我记得不久前自己也遇到过这个问题。你做的和我做的一样..

实际上，您所做的是尝试在 HTML canvas 元素上运行 .resetZoom() 函数。您需要在图表对象而不是 Canvas 元素上执行此操作。

YouTube 视频带您一探究竟: https://www.youtube.com/watch?v=tWlENvyr9cY

工作 CodePen: https://codepen.io/vpolston/pen/MWGVmrX

一些不应该做的事的例子..

document.getElementById('myChart').resetZoom() // vanilla JavaScript

甚至

$("#myChart").resetZoom() // jQuery

您实际需要做的是在实例化图表时将 .resetZoom() 附加到图表对象上。所以在你的代码中:

const myChart = new Chart('myChart', {}

无论您在创建图表时将变量设置为什么，都需要 .resetZoom()。所以这个会起作用:

myChart.resetZoom();

现在要使它成为一个可点击的按钮，我们可以创建一个函数。该函数接受图表对象的任何命名。

JS

resetZoomBtn = (chart) => {
  
  chart.resetZoom()
  
};

然后在我们的 HTML 中我们调用该函数并传递您在实例化图表时调用的任何内容作为参数。

<div class="chart-container">
  <canvas id="myChart"></canvas>
  <button onclick="resetZoomBtn(myChart)">reset zoom</button>
</div>

希望这对查看此问题的任何人有所帮助，因为它出现在 Google 搜索结果的顶部。我知道它在四年后被标记为“答案”的可能性很小。

谢谢，副总裁