此代码使用Chart.js创建折线图，以显示从Google Sheets电子表格中获取的Nifty PCR COI和Bank Nifty PCR COI数据。图表显示在canvas元素中，数据按setInterval设置的间隔更新（）. Chart.js的缩放插件也用于在图表中缩放，但缩放插件不工作，我想在启用触摸的设备中用手指缩放我该如何解决这个问题
<html>
<head>
</head>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7/dist/chartjs-plugin-zoom.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="loader" style="display: flex; justify-content: center; align-items: center; height: 400px; background-color: #f2f2f2">
<div style="text-align: center; font-size: 2em; font-weight: bold; color: #3e95cd;">Loading...</div>
</div>
<canvas id="myChart" width="400" height="400" style="display: none;"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
fetch('https://script.googleusercontent.com/macros/echo?user_content_key=r9CiwwP04Rh83CglKNwLbJw3zKlvAIWVj4Yf9a5cT3CPRmlxaBB9bOAMnkFV2os4ee10iaj9S7HNOU5axJWhdXmuYbHPVyWnm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnC4mxGG_R4juVl897H-HHcU5jBSu36oRyKZzBJteCuzXZ2p8eeHkRfjTV-mrMKhBOgim2y6bAoCZpSiZg9-Rh7EUjhE06fNngtz9Jw9Md8uu&lib=MQ0aMrcKwzFLX_7mD1gjcTxV-kV6j6m2N')
.then(response => response.json())
.then(data => {
document.getElementById("loader").style.display = "none";
document.getElementById("myChart").style.display = "block";
const chartData = {
labels: data.map(d => d.TimeCOI).reverse(),
datasets: [
{
label: 'Nifty PCR COI',
data: data.map(d => d.Nifty_PCR_COI).reverse(),
borderColor: '#3e95cd',
fill: false,
lineTension: .3,
pointRadius: 2,
pointBackgroundColor: '#3e95cd'
},{
label: 'Bank Nifty PCR COI',
data: data.map(d => d.Bank_Nifty_PCR_COI).reverse(),
borderColor: '#c65e3e',
fill: false,
lineTension: .3,
pointRadius: 2,
pointBackgroundColor: '#c65e3e'
}
]
};
const chartOptions = {
responsive: false,
zoom: {
enabled: true,
mode: 'x',
drag: true,
speed: 0.05
},
scales: {
y: {
beginAtZero: true,
position: 'right'
}
}
};
const chart = new Chart(ctx, {
type: 'line',
data: chartData,
options: chartOptions
});
setInterval(() => {
fetch('https://script.googleusercontent.com/macros/echo?user_content_key=r9CiwwP04Rh83CglKNwLbJw3zKlvAIWVj4Yf9a5cT3CPRmlxaBB9bOAMnkFV2os4ee10iaj9S7HNOU5axJWhdXmuYbHPVyWnm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnC4mxGG_R4juVl897H-HHcU5jBSu36oRyKZzBJteCuzXZ2p8eeHkRfjTV-mrMKhBOgim2y6bAoCZpSiZg9-Rh7EUjhE06fNngtz9Jw9Md8uu&lib=MQ0aMrcKwzFLX_7mD1gjcTxV-kV6j6m2N')
.then(response => response.json())
.then(newData => {
chart.data.labels = newData.map(d => d.TimeCOI).reverse();
chart.data.datasets[0].data = newData.map(d => d.Nifty_PCR_COI).reverse();
chart.data.datasets[1].data = newData.map(d => d.Bank_Nifty_PCR_COI).reverse();
chart.update();
});
}, 1000);
});
</script>
</body>
</html>有人能帮我吗？
1条答案
按热度按时间ecbunoof1#
在我看来，你的缩放选项应该在关键***插件***下。
基本配置见this example。
大概是这样的