Question

共同讨论。

此示例使用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,
                            mode: 'x',
                            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>

如何使用ChartJS与大数据交互？

0 个答案: