首页利用原生js实现获取Django后端的实时数据并以折线图形式展示,给个这样的代码

利用原生js实现获取Django后端的实时数据并以折线图形式展示,给个这样的代码

时间: 2024-03-11 14:49:07 浏览: 114

以下是一个获取Django后端实时数据并以折线图形式展示的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Real-time Data Visualization with Django and JavaScript</title> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head> <body>  <div id="plot"></div> <script> // 获取数据的URL const url = "/api/data/"; // 绘制折线图的函数 function plotData(data) { const xValues = data.map(d => d.time); const yValues = data.map(d => d.value); const trace = { x: xValues, y: yValues, type: "scatter" }; const layout = { title: "Real-time Data Visualization with Django and JavaScript", xaxis: { title: "Time" }, yaxis: { title: "Value" } }; Plotly.newPlot("plot", [trace], layout); } // 定时获取数据并更新折线图 setInterval(() => { fetch(url) .then(response => response.json()) .then(data => plotData(data)); }, 1000); // 每秒钟获取一次数据 </script> </body> </html> ``` 此代码使用原生JavaScript从Django后端获取实时数据，并使用Plotly.js库绘制折线图。主要步骤如下： 1. 创建包含折线图的容器 2. 定义获取数据的URL和绘制折线图的函数 3. 使用`setInterval`函数定时获取数据并更新折线图

阅读全文