Nuxt Plotly 模块

📊 nuxt-plotly 模块是 plotly.js 的轻量级 Nuxt3 封装

特性

🎇 所有 plotly.js 方法和事件
🗾 屏幕尺寸更改和属性更新时自动重绘
🚀 数据响应式
🏝️ 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 指令访问 Plotly 事件，以从 <nuxt-plotly> 组件接收 PlotlyHTMLElement 对象。

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 许可证。