Function-Plot-GUI

中文文档

Live Demo: https://plot.linho.cc/

A graphical editor built for function-plot, developed using Vue 3 & Vite.

Function-plot accepts configuration options via a JavaScript object. Function-Plot-GUI provides an intuitive graphical interface for generating these options and outputs them in JSON5 format. JSON5 is compatible with JavaScript object literal syntax, making it easy to copy and paste directly.

Comparison with GeoGebra/Desmos

Tools like GeoGebra and Desmos offer more powerful plotting capabilities, additional assistive features, and support for exporting to various image formats. If you're looking for a drawing tool primarily for teaching or learning purposes, they are likely better suited for your needs.

However, GeoGebra and Desmos are not open-source, meaning you can't host them yourself. To embed their graphs in your webpage, you have to use the iframe they provide. Relying on external services can introduce higher maintenance costs and potential reliability issues. As an alternative, using function-plot-GUI for configuration and the function-plot library for rendering offers a solid self-hosted solution. Config files can be written in plain-text formats like JSON, JSON5, or YAML, and you can even define custom syntax for rendering directly in Markdown files. The documentation site LinhoNotes adopts this approach.

Integrating with Your Application

Function-plot-GUI supports receiving data via a base64-encoded URL parameter.

For example, given the following function-plot configuration:

functionPlot({
  data: [
    {
      fn: "x^2-1",
    },
  ],
});

Convert the options to JSON or JSON5:

{"data":[{"fn":"x^2-1"}]}

Then base64 encode it (omit the trailing =):

eyJkYXRhIjpbeyJmbiI6InheMi0xIn1dfQ

Pass it as the code parameter in the URL:

https://plot.linho.cc/?code=eyJkYXRhIjpbeyJmbiI6InheMi0xIn1dfQ

This will open the web editor with the configuration preloaded, allowing you to modify the settings and preview the graph.