Nuxt Plotly 模組

📊 nuxt-plotly 模組是 plotly.js 的輕量 Nuxt3 包裝器

功能

🎇 所有 plotly.js 的方法和事件
🗾 在螢幕尺寸變更和 props 更新時自動重繪
🚀 資料反應性
🏝️ TypeScript 支援

快速設定

將 nuxt-plotly 依賴項新增至您的專案

npx nuxi@latest module add nuxt-plotly

將 nuxt-plotly 新增至 nuxt.config.ts 的 modules 區段

// nuxt.config.js
export default defineNuxtConfig({
  /**
   * Add nuxt-plotly module
   */
  modules: ["nuxt-plotly"],

  /**
   * Add nuxt-plotly module with options
   * Set the inject option to true to use plotly function via $plotly
   */
  // modules: [["nuxt-plotly", { inject: true }]],
});

將 plotly.js-dist-min 新增至 nuxt.config.ts 的 vite.optimizeDeps.include 區段

// nuxt.config.js
export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: ["plotly.js-dist-min"],
    },
  },
});

就這樣！您現在可以在您的 Nuxt 應用程式中使用 Nuxt Plotly 模組了 ✨

需要客戶端

在 Nuxt3 中，有兩種方式可以在客戶端使用 nuxt-plotly 模組

使用 <client-only> 標籤包裝元件。

<client-only>
  <nuxt-plotly
    :data="pieChart.data"
    :layout="pieChart.layout"
    :config="pieChart.config"
    style="width: 100%"
  ></nuxt-plotly>
</client-only>

建立一個具有 .client.vue 副檔名的檔案，例如，PieChart.client.vue，然後您就可以在不使用 <client-only> 標籤的情況下使用該元件。

Plotly 事件監聽器

您可以使用 @on-ready 指令來接收來自 <nuxt-plotly> 元件的 PlotlyHTMLElement 物件，以存取 Plotly 事件。

HTML 範本範例

<template>
  <client-only>
    <nuxt-plotly
      :data="data"
      :layout="layout"
      :config="config"
      @on-ready="myChartOnReady"
    ></nuxt-plotly>
  </client-only>
</template>

在收到 PlotlyHTMLElement 後，您可以存取 Plotly 事件

function myChartOnReady(plotlyHTMLElement: NuxtPlotlyHTMLElement) {
  console.log({ plotlyHTMLElement });

  plotlyHTMLElement.on?.("plotly_afterplot", function () {
    console.log("done plotting");
  });

  plotlyHTMLElement.on?.("plotly_click", function () {
    alert("You clicked this Plotly chart!");
  });
}

Plotly 函數

若要在您的 nuxt 專案中使用 Plotly 函數，請依照下列步驟操作

步驟 1：在您的 nuxt.config.ts 檔案的 nuxt-plotly 模組設定中，將 inject 選項設定為 true。

// nuxt.config.js
export default defineNuxtConfig({
  modules: [["nuxt-plotly", { inject: true }]],
});

步驟 2：將 inject 選項設定為 true 後，您現在可以透過您的 nuxt 專案中的 $plotly 存取 plotly 函數。

// app.vue

const { $plotly } = useNuxtApp();

/**
 * Show all plotly functions
 */
console.log($plotly);

/**
 * Use downloadImage function
 */
$plotly.downloadImage(plotlyHTMLElement as HTMLElement, {
  format: "png",
  width: 800,
  height: 600,
  filename: "newplot",
});

類型別名

這些類型別名簡化了在您的 Nuxt 專案中使用 Plotly 類型的方式

/**
 * Represents an array of Plotly data objects.
 */
export type NuxtPlotlyData = Array<Plotly.Data>;

/**
 * Represents a partial configuration object for Plotly charts.
 */
export type NuxtPlotlyConfig = Partial<Plotly.Config>;

/**
 * Represents a partial layout object for Plotly charts.
 */
export type NuxtPlotlyLayout = Partial<Plotly.Layout>;

/**
 * Represents a partial HTML element that holds a rendered Plotly chart.
 */
export type NuxtPlotlyHTMLElement = Partial<Plotly.PlotlyHTMLElement>;

透過這些類型別名，您可以輕鬆地在您的 Nuxt 應用程式中使用 Plotly 資料、設定、版面配置和 HTML 元素，從而增強您建立互動式圖表和視覺化效果的體驗。

開發：如果您想要貢獻

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

授權

此專案以 MIT 授權。