ChartJS 重置图表中的缩放

kupeojn6 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(179)

我需要一个帮助。我按照这个教程https://www.dyclassroom.com/chartjs/chartjs-how-to-draw-line-graph-using-data-from-mysql-table-and-php。我设法启动chartjs插件缩放。现在我想添加按钮“重置缩放”我fallowed这个教程：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)

你能给予我一个建议吗？

chart.js

来源：https://stackoverflow.com/questions/49298855/resetzoom-in-chartjs

1条答案

按热度按时间

zynd9foi1#

有点惊讶这个问题还没有得到回答。我记得不久前我自己也遇到了这个问题。你正在做我正在做的事情。
实际上，您所做的是尝试在HTML画布元素上运行.resetZoom（）函数。您需要在图表对象上执行此操作，而不是在画布元素上。

YouTube视频带您体验：https://www.youtube.com/watch?v=tWlENvyr9cY
工作代码笔：https://codepen.io/vpolston/pen/MWGVmrX

几个例子什么 * 不 * 做..

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

或者甚至

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

实际上，您需要做的是在示例化图表时将.resetZoom（）附加到Chart对象上。

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

无论您在创建图表时将变量设置为什么，都需要.resetZoom（）。因此，this 将起作用：

myChart.resetZoom();

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

resetZoomBtn = (chart) => {

  chart.resetZoom()

};

然后在HTML中调用该函数，并将示例化时调用的图表作为参数传递。

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

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

谢谢副总裁

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 重置图表中的缩放

1条答案

相关问题

热门标签

最新问答