以Plotly丰富你的React应用：绘制动态图表

2024-01-30 07:12:41

想要以简单方便的方式在你的React应用程序中构建交互式图形，不妨一睹Plotly的风采。作为JavaScript图形库翘楚，它凭借易用性和强大功能而广受好评。现在让我们一探究竟，了解如何在React应用中灵活运用Plotly。

在React项目中引入Plotly，你只需安装相关依赖即可。利用npm包管理器，执行如下命令：

npm install plotly.js

接着，在你的项目中导入Plotly：

import Plotly from 'plotly.js';

绘制第一个Plotly图表

我们以绘制折线图为例，一步步来构建你的第一个Plotly图表。

import React, { useState } from 'react';
import Plotly from 'plotly.js';

const MyPlot = () => {
  // 初始化数据
  const [data] = useState([
    {
      x: [1, 2, 3, 4, 5],
      y: [10, 20, 30, 40, 50],
      type: 'scatter'
    }
  ]);

  // 设置布局
  const layout = {
    title: '这是一个Plotly折线图',
    xaxis: {
      title: 'x轴',
    },
    yaxis: {
      title: 'y轴',
    }
  };

  // 绘制图表
  Plotly.newPlot('my-plot', data, layout);

  return <div id="my-plot"></div>;
};

export default MyPlot;