记录一次vue中使用react代码，react-chart-editor，Plotly图标编辑工具

嘿写bug呢
50 阅读3分钟

需求

1、问答显示的图表有些显示效果不好，需要点击自己编辑图表

2、目前已有一个方案，但是编辑效果不理想，需要重新换一个

调研

1、去寻找合适的图表编辑工具

2、发现了一些：

  • Apache Superset 是一个开源的数据探索和可视化平台，提供了丰富的图表类型和自定义仪表板功能。它支持与多种数据库连接，用户可以通过浏览器在线创建和编辑图表。 Apache Superset ：superset.apache.org/docs/intro/
  • Metabase：Metabase 是一个开源的商业智能工具，提供了简单易用的界面，允许用户在线创建、编辑和分享图表和仪表板。Metabase 支持多种数据源，非常适合快速构建数据可视化解决方案。 网址：github.com/metabase/me…
  • Redash 是一个开源的数据可视化和仪表板工具，支持多种数据源。用户可以在线编辑和分享查询和图表，适合团队协作的数据分析工作。 网址：github.com/getredash/r…备注：这个需要搭配数据库使用

3、但是有些需要付费订阅，有些可以使用但是不开源吗，需要登陆。于是一直在寻找

4、最后找到了plotly github.com/plotly/plot… 然后他这个是开源的，也有一个自己研发的图表编辑网站很棒，但是没有开源 网址：chart-studio.plotly.com/create/?ext… 5、开始想着自己通过他开源的东西初步实现，试了会儿，实现了简单的版本。

6、后面发现了**react-chart-editor**更加好用，但是问题是react的，我们项目是vue,经过调研，可以嵌入。

实现

1.建立一个**react-chart-editor**项目，然后正常运行起来。遇到过一些坑，但是都解决了

2、打包，放到vue项目的public下面。

3、建立一个html文件，引用这个打包的js和html

<!doctype html>
<html lang="en">
​
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>自定义图表</title>
  <link rel="stylesheet" href="./charts/static/css/main.32b80b93.css">
</head>
​
<body>
  <div id="root" style="width: 100%; height: 100%;"></div>
  <script src="./charts/static/js/main.18e947f6.js"></script>
</body>
​
</html>

4、然后项目跳转到这个页面

 // 绑定点击事件处理函数到全局的 <body> 元素
  document.body.addEventListener('click', function (event) {
    // 检查事件目标是否是 <a> 元素且包含自定义属性 data-id
    if (event.target.matches('a[data-id]')) {
      event.preventDefault();
      const dataId = event.target.getAttribute('data-id');
      localStorage.setItem('chartsData', bdMapBuffer.value[dataId]);
      // 在这里执行你的点击事件处理逻辑
      //打开一个新窗口 链接为/graph.html
      window.open('/graph.html', '_blank');
      // setTimeout(() => {
      //   bd.sendBroadcastMessage(bdMapBuffer.value[dataId]);
      //   console.log('Sent broadcast message',bdMapBuffer.value[dataId])
       
      // }, 500);
    }
  });

5、传图表数据：

开始使用的是广播的方式，然后使用的是localstorage

原本的广播方式
export function createBroadcastChannel() {
  const bd = new BroadcastChannel("broadcast");
​
  // 监听广播消息
  bd.onmessage = function (event) {
    // console.log("React 收到广播消息：", event.data);
    // 处理接收到的消息
  };
​
  // 发送广播消息
  function sendBroadcastMessage(message) {
    bd.postMessage(message);
  }
​
  // 关闭广播通道
  function closeBroadcastChannel() {
    bd.close();
  }
  return {
    sendBroadcastMessage,
    closeBroadcastChannel,
  };
}
​
后面的：
​
 // 绑定点击事件处理函数到全局的 <body> 元素
  document.body.addEventListener('click', function (event) {
    // 检查事件目标是否是 <a> 元素且包含自定义属性 data-id
    if (event.target.matches('a[data-id]')) {
      event.preventDefault();
      const dataId = event.target.getAttribute('data-id');
      localStorage.setItem('chartsData', bdMapBuffer.value[dataId]);
      // 在这里执行你的点击事件处理逻辑
      //打开一个新窗口 链接为/graph.html
      window.open('/graph.html', '_blank');
      // setTimeout(() => {
      //   bd.sendBroadcastMessage(bdMapBuffer.value[dataId]);
      //   console.log('Sent broadcast message',bdMapBuffer.value[dataId])
       
      // }, 500);
    }
  });

检验

1、可以点击之后直接跳转到新的编辑页面 2、然后可以获取传来的图表数据，使用**react-chart-editor**一样的页面进行编辑，并且可以保存图表

完善

英文不利于客户操作，翻译一下

avatar
文章
阅读
粉丝