铜价走势图：动态图显示铜价历史趋势和预测

本走势图显示了铜在历史上的价格趋势以及未来的预测。

css / 样式表 /chart {width: 100%;height: 500px; } javascript / 脚本 /// 加载图表数据 const data = [{date: '2020-01-01',price: 5000},{date: '2020-02-01',price: 5100},// ...其他数据 ];// 创建图表 const chart = d3.select('chart').append('svg').attr('width', '100%').attr('height', '500px');// 定义比例尺 const xScale = d3.scaleTime().domain(d3.extent(data, d => d.date)).range([0, '100%']);const yScale = d3.scaleLinear().domain(d3.extent(data, d => d.price)).range(['100%', 0]);// 绘制折线图 chart.append('path').datum(data).attr('d', d3.line().x(d => xScale(d.date)).y(d => yScale(d.price))).attr('stroke', 'blue').attr('fill', 'none');// 添加坐标轴 chart.append('g').attr('transform', `translate(0, ${'100%'})`).call(d3.axisBottom(xScale));chart.append('g').call(d3.axisLeft(yScale));// 添加预测 d3.json('predictions.json').then(data => {chart.append('path').datum(data).attr('d', d3.line().x(d => xScale(d.date)).y(d => yScale(d.price))).attr('stroke', 'red').attr('fill', 'none').attr('stroke-dasharray', '5');// 添加预测标签chart.append('text').attr('x', '100%').attr('y', '0').attr('dy', '-0.5em').text('预测'); });注意事项：此代码需要将“predictions.json”文件放置在与此 html 文件相同的目录中。该文件应包含以下格式的预测数据： json [{date: '2023-01-01',price: 6000},{date: '2023-02-01',price: 6100},// ... 其他预测数据 ]此代码使用 d3.js 库来创建图表。如果尚未安装 d3.js，则需要将其下载并添加到您的项目中。

标签： 动态图显示铜价历史趋势和预测 铜价走势图