共同讨论。
此示例使用ChartJS绘制5000点数据集。可以使用chartjs-plugin-zoom操纵此图。但是，响应速度很慢。
如何使用ChartJS快速与此图表进行交互？ 除了ChartJS之外，还有其他方法可以使用吗？
首先，ChartJS可以绘制多少点？我认为2000点是实现流畅互动的极限。
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/jquery-ui-css/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.4"></script>
<div class="chart" style="width:100%">
<canvas id="myChartA" class="myChart"></canvas>
</div>
<script>
var leftEnd;
var rightEnd;
function updateChart() {
myChartA.options.scales.xAxes[0].time.min = leftEnd;
myChartA.options.scales.xAxes[0].time.max = rightEnd;
}
var ctxA = document.getElementById("myChartA").getcontext("2d");
let labels = [];
let data1 = [];
for (let i = 0; i < 5000; i++) {
labels.push(moment(1369543600 + i * 1000000).toDate());
data1.push(Math.floor(Math.random() * 100));
}
var myChartA = new Chart(ctxA,{
type: 'line',data: {
labels: labels,datasets: [{
label: 'My First dataset',borderColor: 'rgb(255,99,132)',data: data1,pointRadius:0,lineTension: 0,fill: false
}]
},options: {
animation: false,scales: {
xAxes: [{
type: 'time',time: {
displayFormat: 'h:mm',},min: leftEnd,max: rightEnd
}]
},plugins: {
zoom: {
pan: {
enabled: true,mode: 'x',onPan: function () {
console.log("PAN");
leftEnd = myChartA.getdatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[0].time;
rightEnd = myChartA.getdatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[1].time;
updateChart();
}
},zoom: {
enabled: true,onzoom: function () {
console.log("zoom");
leftEnd = myChartA.getdatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[0].time;
rightEnd = myChartA.getdatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[1].time;
updateChart();
}
}
}
},responsive: true,legend: {
display: false
}
}
});
</script>
</body>
</html>