快捷導(dǎo)航

使用Vue3和Plotly.js繪制動(dòng)態(tài)3D圖表的示例代碼

更新時(shí)間：2024年06月30日 08:49:53 作者：ScriptEcho

在數(shù)據(jù)可視化應(yīng)用中,需要將數(shù)據(jù)動(dòng)態(tài)加載到圖表中并進(jìn)行實(shí)時(shí)更新,本文將展示如何使用Plotly.js和Vue.js實(shí)現(xiàn)這一功能,從加載外部數(shù)據(jù)到創(chuàng)建交互式圖表,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下

實(shí)現(xiàn)效果

Plotly.js: 使用Vue.js動(dòng)態(tài)加載數(shù)據(jù)并繪制圖表

應(yīng)用場(chǎng)景

在數(shù)據(jù)可視化應(yīng)用中，需要將數(shù)據(jù)動(dòng)態(tài)加載到圖表中并進(jìn)行實(shí)時(shí)更新。本文將展示如何使用Plotly.js和Vue.js實(shí)現(xiàn)這一功能，從加載外部數(shù)據(jù)到創(chuàng)建交互式圖表。

代碼基本功能

此代碼的主要功能是：

使用Vue.js的onMounted鉤子異步加載所需的JavaScript庫(kù)。
使用d3.js從CSV文件中加載數(shù)據(jù)。
使用Plotly.js創(chuàng)建交互式折線(xiàn)圖，顯示加載的數(shù)據(jù)。

功能實(shí)現(xiàn)步驟及關(guān)鍵代碼分析

1. 加載外部腳本

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)
  })
}

此函數(shù)使用Promise異步加載外部腳本。它創(chuàng)建了一個(gè)<script>元素，設(shè)置其屬性并將其附加到<body>元素。一旦腳本加載完成，它將解析Promise，否則會(huì)拒絕它。

2. 從CSV文件加載數(shù)據(jù)

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

此代碼使用d3.js從指定URL加載CSV文件。它接受一個(gè)回調(diào)函數(shù)，該函數(shù)在數(shù)據(jù)加載后被調(diào)用，將數(shù)據(jù)傳遞給processData函數(shù)。

3. 處理數(shù)據(jù)

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)
}

此函數(shù)處理從CSV文件加載的數(shù)據(jù)。它提取x和y坐標(biāo)值并將其存儲(chǔ)在數(shù)組中。它還可以計(jì)算標(biāo)準(zhǔn)偏差，但在此示例中未顯示。

4. 創(chuàng)建Plotly圖表

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)
}

此函數(shù)使用Plotly.js創(chuàng)建交互式折線(xiàn)圖。它指定了x和y數(shù)據(jù)、圖表標(biāo)題和x軸屬性。然后它將圖表繪制到指定容器（myDiv）中。

總結(jié)與展望

通過(guò)結(jié)合Vue.js和Plotly.js，我們能夠從外部源動(dòng)態(tài)加載數(shù)據(jù)并創(chuàng)建交互式圖表。這種方法可以用于各種數(shù)據(jù)可視化應(yīng)用，例如實(shí)時(shí)數(shù)據(jù)監(jiān)控、儀表板和交互式數(shù)據(jù)探索。

開(kāi)發(fā)經(jīng)驗(yàn)與收獲：