Granite TimeSeries FlowState R1开发实战JavaScript调用预测API实现动态图表你是不是也遇到过这样的场景手头有一堆时间序列数据比如每天的销售额、网站的访问量或者服务器的CPU使用率你想预测一下未来几天的趋势好提前做些准备。自己写预测算法门槛太高了。用现成的工具又不知道怎么整合到自己的网页应用里。今天咱们就来解决这个问题。假设你已经部署好了Granite TimeSeries FlowState R1这个时间序列预测模型它就像一个黑盒子你喂给它过去的数据它就能吐出未来的预测。我们的目标就是写一个简单的网页用JavaScript去“敲敲”这个黑盒子拿到预测结果然后画成一张能看、能交互的漂亮图表。整个过程比你想象的要简单基本上就是三步发请求、拿数据、画图表。接下来我就带你一步步把它实现出来。1. 准备工作你需要什么在开始写代码之前咱们先把“食材”准备好。你不需要是个JavaScript专家但最好对HTML和JS有点基本了解知道怎么在浏览器里打开一个网页文件就行。第一一个能用的预测API接口。这是核心。你得确保Granite TimeSeries FlowState R1模型已经部署好了并且有一个可以访问的API地址。通常它会是一个URL比如http://你的服务器地址:端口号/predict。你需要知道这个地址以及调用它需要什么格式的数据。为了演示我们假设API接收一个JSON格式的请求里面包含历史数据然后返回预测数据。第二一个现代浏览器。Chrome、Firefox、Edge都行。我们将使用浏览器内置的fetchAPI来发送网络请求这是现代浏览器的标准功能。第三一个代码编辑器。Notepad、VS Code、甚至系统的记事本都可以。咱们要创建几个简单的文本文件。第四Chart.js库。这是用来画图的神器。它是一个非常流行的JavaScript图表库简单易用效果漂亮。我们不需要下载安装直接从网上引用它的CDN地址就行省心省力。好了食材齐了咱们开始下厨。2. 搭建基础网页结构我们先创建一个最基础的HTML文件把它当成我们应用的“骨架”。创建一个新文件命名为index.html然后把下面的代码贴进去!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title时序数据预测与图表展示/title !-- 引入Chart.js库 -- script srchttps://cdn.jsdelivr.net/npm/chart.js/script style body { font-family: sans-serif; max-width: 1000px; margin: 20px auto; padding: 20px; background-color: #f5f5f5; } .container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } h1 { color: #333; text-align: center; } .controls { margin: 20px 0; text-align: center; } button { background-color: #4CAF50; color: white; padding: 12px 24px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; margin: 5px; } button:hover { background-color: #45a049; } #chartContainer { margin-top: 30px; position: relative; height: 400px; } #status { margin-top: 15px; padding: 10px; border-radius: 5px; text-align: center; font-weight: bold; } .loading { background-color: #fff3cd; color: #856404; } .success { background-color: #d4edda; color: #155724; } .error { background-color: #f8d7da; color: #721c24; } /style /head body div classcontainer h1 时序数据预测动态图表/h1 p styletext-align: center; color: #666;使用JavaScript调用Granite TimeSeries FlowState R1 API实时生成预测图表。/p div classcontrols button idpredictBtn获取预测数据并绘图/button button idresetBtn重置图表/button /div div idstatus等待操作.../div div idchartContainer !-- 图表将在这里被渲染 -- canvas idmyChart/canvas /div /div !-- 我们的JavaScript代码将放在这里 -- script // 主要的JavaScript代码会在下一步编写 /script /body /html这段代码做了几件事设置了页面标题和基本样式让页面看起来清爽一些。在head里引入了Chart.js库这样我们后面就能用它了。在body里定义了几个关键部分一个标题和描述。两个按钮一个用来触发预测一个用来重置图表。一个状态提示区域 (#status)用来显示“加载中”、“成功”或“出错”信息。一个canvas画布 (#myChart)这是Chart.js绘制图表的地方。现在你可以用浏览器直接打开这个index.html文件应该能看到一个带有按钮的简单页面。当然点击按钮还不会有任何反应因为核心逻辑我们还没写。3. 编写JavaScript核心逻辑接下来是重头戏我们把逻辑写到script标签里。我们会分几个小步骤来完成。3.1 定义模拟数据与API信息在实际项目中你的历史数据可能来自数据库或用户上传。这里为了演示我们先在代码里“造”一些历史数据。同时我们需要定义你的预测API地址。在上一步的script标签内添加以下代码// 1. 配置你的预测API端点请替换为你的实际API地址 const API_URL http://localhost:8000/predict; // 示例地址务必修改 const API_METHOD POST; // 通常预测接口使用POST请求 const API_HEADERS { Content-Type: application/json, // 告诉服务器我们发送的是JSON // 如果需要认证可以在这里添加token // Authorization: Bearer your_token_here }; // 2. 模拟一些历史时间序列数据 // 假设我们有一组过去10天的数据 const historicalData { timestamps: [ 2024-01-01, 2024-01-02, 2024-01-03, 2024-01-04, 2024-01-05, 2024-01-06, 2024-01-07, 2024-01-08, 2024-01-09, 2024-01-10 ], values: [12, 19, 8, 15, 22, 18, 25, 16, 21, 28] }; // 3. 初始化图表变量和配置 let myChart null; // 用于保存Chart.js实例 const chartConfig { type: line, // 折线图最适合展示时序数据 data: { labels: [], // X轴标签时间初始为空 datasets: [{ label: 历史数据, data: [], // Y轴数据初始为空 borderColor: rgb(75, 192, 192), backgroundColor: rgba(75, 192, 192, 0.2), tension: 0.1 // 线条平滑度 }, { label: 模型预测, data: [], // 预测数据初始为空 borderColor: rgb(255, 99, 132), backgroundColor: rgba(255, 99, 132, 0.2), borderDash: [5, 5], // 虚线表示预测部分 tension: 0.1 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { tooltip: { mode: index, intersect: false } }, scales: { x: { title: { display: true, text: 时间 } }, y: { title: { display: true, text: 数值 }, beginAtZero: true } } } };重要提示API_URL变量一定要换成你部署好的Granite TimeSeries FlowState R1模型API的真实地址historicalData里的数据格式字段名timestamps和values也需要根据你的API要求进行调整。3.2 创建调用API的函数现在我们来写一个函数负责把历史数据打包发送给预测API并把结果拿回来。在上面的代码后面继续添加// 4. 核心函数调用预测API async function fetchPrediction() { const statusDiv document.getElementById(status); statusDiv.textContent 正在请求预测数据...; statusDiv.className status loading; // 准备请求体格式需匹配你的API要求 const requestBody { history: historicalData.values, // 可能还需要其他参数比如预测步长 // steps: 7 }; try { console.log(正在发送请求到:, API_URL); const response await fetch(API_URL, { method: API_METHOD, headers: API_HEADERS, body: JSON.stringify(requestBody) // 将JavaScript对象转为JSON字符串 }); console.log(收到响应状态码:, response.status); if (!response.ok) { // 如果HTTP状态码不是2xx抛出错误 throw new Error(网络请求失败: ${response.status} ${response.statusText}); } const result await response.json(); // 解析返回的JSON数据 console.log(API返回数据:, result); // 更新状态为成功 statusDiv.textContent 预测成功获取到 ${result.predictions?.length || 0} 个预测点。; statusDiv.className status success; // 返回预测结果 // 这里假设API返回的预测数据在 result.predictions 字段中 return result.predictions || []; } catch (error) { // 捕获并处理任何错误网络错误、API错误、解析错误等 console.error(调用API时出错:, error); statusDiv.textContent 请求出错: ${error.message}; statusDiv.className status error; // 返回一个空数组避免后续代码崩溃 return []; } }这个函数使用了async/await语法让异步代码写起来像同步一样直观。它做了几件关键事更新页面状态提示用户“正在加载”。使用fetch函数向配置的API地址发送一个POST请求并把我们的历史数据放在请求体里。等待响应并检查HTTP状态是否成功。如果成功将响应体解析为JSON格式。处理可能发生的任何错误并友好地提示用户。3.3 创建绘制和更新图表的函数拿到预测数据后我们需要把它和历史数据一起画到图表上。继续添加以下函数// 5. 函数初始化或更新图表 function updateChart(historicalLabels, historicalValues, predictionValues) { const ctx document.getElementById(myChart).getContext(2d); // 准备完整的标签历史时间 预测时间 // 为预测数据生成简单的未来时间标签例如接在历史日期后 const totalPoints historicalLabels.length predictionValues.length; const allLabels [...historicalLabels]; for (let i 1; i predictionValues.length; i) { allLabels.push(未来第${i}期); } // 准备完整的数据集历史数据 预测数据预测部分历史数据点设为null以断开连线 const allHistoricalDataForChart [...historicalValues, ...Array(predictionValues.length).fill(null)]; const allPredictionDataForChart [...Array(historicalValues.length).fill(null), ...predictionValues]; // 如果图表不存在则创建 if (!myChart) { chartConfig.data.labels allLabels; chartConfig.data.datasets[0].data allHistoricalDataForChart; chartConfig.data.datasets[1].data allPredictionDataForChart; myChart new Chart(ctx, chartConfig); } else { // 如果图表已存在则更新数据 myChart.data.labels allLabels; myChart.data.datasets[0].data allHistoricalDataForChart; myChart.data.datasets[1].data allPredictionDataForChart; myChart.update(); // 重要调用update方法使更改生效 } } // 6. 函数重置图表到初始状态 function resetChart() { const statusDiv document.getElementById(status); statusDiv.textContent 图表已重置。; statusDiv.className status; if (myChart) { // 清空预测数据只保留历史数据 myChart.data.labels historicalData.timestamps; myChart.data.datasets[0].data historicalData.values; myChart.data.datasets[1].data Array(historicalData.values.length).fill(null); myChart.update(); } else { // 如果图表从未初始化则用历史数据初始化它 updateChart(historicalData.timestamps, historicalData.values, []); } }updateChart函数负责将历史数据线和预测数据线画在同一张图上并用虚线区分预测部分。resetChart函数则方便我们一键清除预测结果回到只有历史数据的状态。3.4 绑定按钮点击事件最后我们把按钮和写好的函数连接起来让页面“活”起来。在脚本的最后部分添加// 7. 页面加载完成后执行的逻辑 document.addEventListener(DOMContentLoaded, function() { console.log(页面加载完毕初始化历史数据图表...); // 页面加载时先用历史数据初始化图表 resetChart(); // 为“预测”按钮绑定点击事件 document.getElementById(predictBtn).addEventListener(click, async function() { console.log(点击预测按钮); // 1. 调用API获取预测数据 const predictions await fetchPrediction(); if (predictions.length 0) { // 2. 如果成功获取到预测数据更新图表 updateChart(historicalData.timestamps, historicalData.values, predictions); } else { console.warn(未获取到有效的预测数据图表未更新。); } }); // 为“重置”按钮绑定点击事件 document.getElementById(resetBtn).addEventListener(click, function() { console.log(点击重置按钮); resetChart(); }); console.log(事件绑定完成可以开始操作了。); });这段代码在网页完全加载后执行。它首先用历史数据初始化一个基础图表然后给两个按钮分别加上了“点击监听器”。点击“预测”按钮就会触发整个“请求API - 更新图表”的流程点击“重置”按钮图表就会恢复原样。4. 运行与调试现在所有代码都准备好了。双击打开你的index.html文件。首次加载你应该能看到一个折线图上面绘制着我们预设的10个历史数据点。“模型预测”的数据线是空的。点击“获取预测数据并绘图”页面状态会显示“正在请求...”同时浏览器控制台按F12打开会显示网络请求的日志。如果API调用成功状态会变成绿色“预测成功”图表上会多出一条红色的虚线代表模型对未来数据的预测。如果API调用失败状态会变成红色错误提示。这是最可能遇到的情况因为你的API_URL很可能还没配置正确。常见问题与调试跨域问题 (CORS)如果你的API部署在localhost:8000而网页用file://协议打开或者域名端口不同浏览器会因为安全策略阻止请求。你会在控制台看到CORS错误。解决方法最佳实践将你的HTML页面通过一个简单的HTTP服务器如Python的python -m http.server或Node.js的http-server来运行而不是直接双击文件。后端配置确保你的Granite TimeSeries FlowState R1 API后端配置了正确的CORS头部允许你的网页域名进行访问。API地址或格式错误仔细检查API_URL是否正确以及requestBody的格式是否符合你的API文档要求。通过浏览器控制台的“网络(Network)”标签页可以查看发送出的请求详情和接收到的响应这是调试的利器。数据格式不匹配确认historicalData的字段名如timestamps,values以及API返回的预测数据字段名如predictions与代码中的解析逻辑一致。根据你的API实际响应结构调整fetchPrediction函数中return result.predictions || [];这一行。5. 更进一步让它更实用上面的例子是一个最小化的演示。要让它在实际项目中发挥作用你还可以考虑从输入框或文件读取数据替换掉硬编码的historicalData让用户能输入或上传自己的CSV/JSON数据。动态配置预测参数在页面上增加输入框让用户可以设置预测步长、置信区间等参数并传递给API。美化图表Chart.js有丰富的配置项可以调整颜色、添加图例、设置悬停提示框格式等让图表更专业。错误处理与加载状态我们已经做了一些基础处理可以进一步优化比如在请求时禁用按钮、添加超时重试机制等。与后端框架集成这个纯前端的例子可以轻松地嵌入到Vue、React等现代前端框架的组件中。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。