Chart.js 4 x轴滚动，实时更新图形

2j4z5cfb 于 2022-12-13 发布在 Chart.js

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

我使用Chart.js创建了一个图表，它每500 ms自动更新一次，检查是否存在来自后端的新数据。

setInterval(function(){
    let num = pick_numb()

    num.then(function(result) {
        addData(myLiveChart, label_index++, result)
        // Update one of the points in the second dataset
        myLiveChart.update();
        })
}, 500);

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

async function pick_numb() {
    let random_number_generated = await eel.pick_number(0)();
    return random_number_generated;
}

现在，因为我可以接收成吨的数据;我有我的图表填充非常快，我不能再阅读它（见截图）

我试着创建一个双div和一个x-scroll

<style>
            .chartWrapper {
               position: relative;
            }
            .chartWrapper > canvas {
               position: absolute;
               left: 0;
               top: 0;
               pointer-events:none;
            }
            .chartAreaWrapper {
               width: 600px;
               overflow-x: scroll;
            }
        </style>

    <div class="chartWrapper">
             <div class="chartAreaWrapper">
                 <canvas id="updating-chart" width="1200" height="500"></canvas>
             </div>
          </div>

但它不起作用。
我正在使用Boostrap来格式化我的页面，所以，这可能是原因？

chart.js

来源：https://stackoverflow.com/questions/74717880/chart-js-4-x-axis-scroll-with-live-updating-graph

1条答案

按热度按时间

ttvkxqim1#

解决方案是使用Streaming Plugin和Zoom Plugin

var myLiveChart = new Chart(ctx,{
  type: 'line',
  data: startingData,
  options: {
        scales: {
            x: {
                type: 'realtime',   // x axis will auto-scroll from right to left
                realtime: {         // per-axis options
                  duration: 10000,  // data in the past 20000 ms will be displayed
                  refresh: 500,    // onRefresh callback will be called every 1000 ms
                  delay: 10,      // delay of 1000 ms, so upcoming values are known before plotting a line
                  pause: false,     // chart is not paused
                  ttl: 60000,   // data will be automatically deleted as it disappears off the chart
                  frameRate: 30,    // data points are drawn 30 times every second

                  // a callback to update datasets
                  onRefresh: chart => {

                        let m1 = pick_counter_m1()

                        m1.then(function(result) {
                                 // query your data source and get the array of {x: timestamp, y: value} objects

                                chart.data.datasets[0].data.push(
                                {
                                x: Date.now(),
                                y: result
                              });

                        })

                        
                  }
              }
            },
            y: {
                type: 'linear',
                min: 0,
                max: 2100
            }
        },
        plugins: {
          zoom: {
            // Assume x axis has the realtime scale
            zoom: {
              pinch: {
                enabled: true       // Enable pinch zooming
              },
              wheel: {
                enabled: true       // Enable wheel zooming
              },
              mode: 'x'             // Allow zooming in the x direction
            }
          }
        }
    }
});

赞(0）回复(0）举报 2022-12-13

我来回答

Chart.js 4 x轴滚动，实时更新图形

1条答案

相关问题

热门标签

最新问答