Nuxt Plotly 模块

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

特性

🎇 所有 plotly.js 方法和事件
🗾 自动重绘以适应屏幕尺寸变化和属性更新
🚀 数据响应式
🏝️ TypeScript 支持

快速设置

将 nuxt-plotly 依赖项添加到您的项目中

npx nuxi@latest module add nuxt-plotly

在 nuxt.config.ts 文件的 modules 部分添加 nuxt-plotly

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