本页面提供上海期货交易所主流期货品种实时交易行情走势图，供用户实时跟踪价格变化和市场动态。
-
买价
-
卖价
-
最新价
js
// 导入必要的模块
import as d3 from "d3";
import { csv } from "d3-fetch";// 定义图表大小
const width = 960;
const height = 500;
const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const chartWidth = width - margin.left - margin.right;
const chartHeight = height - margin.top - margin.bottom;// 定义时间格式化器
const parseTime = d3.timeParse("%Y-%m-%d");// 加载数据
csv("data.csv").then(data => {// 转换数据类型data.forEach(d => {d.date = parseTime(d.date);d.buyPrice = +d.buyPrice;d.sellPrice = +d.sellPrice;d.latestPrice = +d.latestPrice;});// 定义x轴刻度const xScale= d3.scaleTime().domain(d3.extent(data, d => d.date)).range([0, chartWidth]);// 定义y轴刻度const yScale = d3.scaleLinear().domain([d3.min(data, d => d.buyPrice), d3.max(data, d => d.sellPrice)]).range([chartHeight, 0]);// 创建SVGconst svg = d3.select("chart-container").append("svg").attr("width", width).attr("height", height);// 创建图表区域const chart = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);// 添加路径线chart.append("path").datum(data).attr("fill", "none").attr("stroke", "red").attr("stroke-width", 1.5).attr("d", d3.line().x(d => xScale(d.date)).y(d => yScale(d.buyPrice)));chart.append("path").datum(data).attr("fill", "none").attr("stroke", "blue").attr("stroke-width", 1.5).attr("d", d3.line().x(d => xScale(d.date)).y(d => yScale(d.sellPrice)));chart.append("path").datum(data).attr("fill", "none").attr("stroke", "black").attr("stroke-width", 1.5).attr("d", d3.line().x(d => xScale(d.date)).y(d => yScale(d.latestPrice)));// 添加x轴chart.append("g").attr("transform", `translate(0, ${chartHeight})`).call(d3.axisBottom(xScale));// 添加y轴chart.append("g").call(d3.axisLeft(yScale));
});
