让用户绘制/显示数据图表

我真的很喜欢 discourse 对内联 LaTeX 的数学讨论支持,以及对图表进行的 mermaid 支持,但我一直缺少的一项功能是能够提取少量数据并绘制 x/y 图——进入电子表格并导出 png 很麻烦。但在稍微查看了 mermaid 主题组件的源代码后,我在制作 plotly.js 的主题组件方面取得了一些成功。它在这里:

启用后,您可以通过以下方式进行散点图:

```plotly
data:
  - x: [0,300,400]
    y: [0,950,1050]
    name: Old mempool
  - x: [0,200,400]
    y: [0,700, 1150]
    name: New mempool
layout:
  title: Test plot
```

生成类似以下的图像:

或者,大概是您可以通过将数据/布局值传递给 plotly.js 来制作的任何 其他类型的图表

一个特别好的地方是,图表默认是交互式的,因此您可以通过悬停查看点的实际值,可以放大和缩小,还可以保存 png。当然,原始数据也包含在帖子源代码中。

我还没有将其部署到生产环境,所以只能说它在测试环境中似乎运行良好;但我想提早分享它,特别是以防有人想接手为我维护它…… :slight_smile: (另外,如果有什么更好的方法可以做到这一点,而我只是不知何故错过了,我很乐意在浪费更多时间之前了解它……)

(最小化的 plotly js 超过 4MB,所以我想你需要将“最大附件大小”设置提高到 5MB 才能使其工作?)

9 个赞

这很棒,干得漂亮!

准备好在生产环境中使用它时,请将其发布到 Theme component 类别下。我很想看到它与 mermaid 组件一起使用。(另外请注意,我们有一个 graphviz 插件,其功能与此类似。)

此外,plotly 也有一个活跃的社区,他们也很想了解这个:

6 个赞