使用Vue3和Plotly.js绘制动态3D图表的示例代码

目录

• 实现效果
• Plotly.js: 使用Vue.js动态加载数据并绘制图表
应用场景
代码基本功能
功能实现步骤及关键代码分析
1. 加载外部脚本
2. 从CSV文件加载数据
3. 处理数据
4. 创建Plotly图表
• 总结与展望

const loadJavascript = (jsUrl) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.onload = () => resolve('')
    script.onerror = (err) => reject(err)
    script.src = jsUrl
    document.body.appendChild(script)
  })
}

d3.csv(
  'https://raw.githubusercontent.com/plotly/datasets/master/2014_apple_stock.csv',
  function (data) {
    processData(data)
  },
)

function processData(allRows) {
  var x = [],
    y = [],
    standard_deviation = []
  for (var i = 0; i < allRows.length; i++) {
    var row = allRows[i]
    x.push(row['AAPL_x'])
    y.push(row['AAPL_y'])
  }
  makePlotly(x, y, standard_deviation)
}

function makePlotly(x, y, standard_deviation) {
  var plotDiv = document.getElementById('myDiv')
  var traces = [
    {
      x: x,
      y: y,
    },
  ]
  var layout = {
    title: 'Plotting CSV data from AJAX call',
    xaxis: { fixedrange: true },
  }
  Plotly.newPlot('myDiv', traces, layout)
}

详解plotly.js 绘图库入门使用教程
vue3集成echarts数据刷新后图表不刷新的解决方法
在Vue3中如何更优雅的使用echart图表详解
vue中使用echarts绘制双Y轴图表时刻度没有对齐的两种解决方法(最新方案)
vue中使用echarts并根据选择条件动态展示echarts图表