Javascript 如何使用Chart JS启用缩放插件？_Javascript_Chart.js

Javascript 如何使用Chart JS启用缩放插件？

javascript chart.js

Javascript 如何使用Chart JS启用缩放插件？,javascript,chart.js,Javascript,Chart.js,在编写这段代码之前，我一直在使用带有zoom插件的Chart JS。但出于某种原因，我从代码中删除了插件语法，现在我想再次添加它。但是现在变焦不起作用了，我的代码和以前使用变焦插件时一样，但变焦不起作用。我该怎么办 let myChart = new Chart(chart, { type: 'line', data: { labels: dataInputGlobal[0], datasets: [{ label: 'E

在编写这段代码之前，我一直在使用带有zoom插件的Chart JS。但出于某种原因，我从代码中删除了插件语法，现在我想再次添加它。但是现在变焦不起作用了，我的代码和以前使用变焦插件时一样，但变焦不起作用。我该怎么办


let myChart = new Chart(chart, {
    type: 'line',
    data: {
        labels: dataInputGlobal[0],
        datasets: [{
            label: 'ECG',
            data: dataInputGlobal[1],
            fill: false,
            borderColor: [
                'rgba(255, 0,0, 1)'
            ],
            borderWidth: 1,
            pointStyle: 'line'
        }]
    },
    options: {

        legend: {
            position: "top",
            align: "end"
        },
        title: {
            text: "ECG",
            display: true,
            fontSize: 40
        }
    },
    plugins: {
        zoom: {
            zoom: {
                enabled: true,
                drag: true,
                speed: 0.1,
                threshold: 2
            }
        }
    }
});

这是我的HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloudias</title>
    <style>
        .chart {
            height: 800px;
            width: 50%;
        }
    </style>

</head>

<body>
    <h1>Input file</h1>
    <label for="txtFile">Input File</label>
    <input type="file" name="txtFile" id="txtFile" multiple>
    <div class="chart">
        <canvas id="cobaPlot"></canvas>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
        integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g=="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.7.7/chartjs-plugin-zoom.js"
        integrity="sha512-qeclqxc+2KW7GtbmHcj/Ev5eBoYpPnuAcPqusYRIfvaC9OWHlDwu1BrIVPYvfNDG+SRIRiPIokiSvhlLJXDqsw=="
        crossorigin="anonymous"></script>
    <script src="script.js"></script>

</body>

</html>

常量图表=document.querySelectorcobaPlot；让myChart=新图表{ 键入：“行”，数据：{ 标签：['a'，'b'，'c'，'d'，'e'，'f'，'g'，'h'，'i'，'j']，数据集：[{ 标签：“ECG”，数据：['100'，'150'，'500'，'200'，'300'，'500'，'200'，'320'，'450'，'100']，填充：假，边框颜色：[ 'rgba255、99、132、1' ], 边框宽度：1，点样式：“线” }] }, 选项：{ 图例：{ 位置：顶部，对齐：结束 }, 标题：{ 文本：ECG，显示：对，尺码：35 }, 缩放：{ 启用：对，是的，速度：0.1，阈值：2 } } }; .图表{ 位置：相对位置；保证金：自动；宽度：90%； } 测验

添加一些实例。如果选项中添加了此选项，我是否仍然需要html文件中的cdn zoom插件？@Cloudias是的，您应该这样做。谢谢，这是有效的。请问，当我缩放图表时，如何使x轴移动？例如，在上面的图形上，我希望放大图形中的某个位置，并且我希望图形在我缩放的位置是特定的，而不是显示所有的x轴。感谢您可以使用pan:{enabled:true，mode:'x'}来移动x轴。