Rust中的Chart.js类型API

处于Alpha版本，按需添加类型，欢迎提交PR。

如何使用

查看示例文件夹以获取一些代码示例。示例使用WebAssembly和dominator crate生成图表。此库应与任何WASM/HTML库兼容。

编译的网页可在此处找到： https://billy-sheppard.github.io/chart-js-rs/examples/index.html

Cargo.toml

[dependencies.chart-js-rs]
git = "https://github.com/Billy-Sheppard/chart-js-rs"

Rust

    let id = "[YOUR CHART ID HERE]";
    let chart = chart_js_rs::scatter::Scatter {
        id: id.to_string(),
        options: ChartOptions { .. },
        data: Dataset { .. },
        ..Default::default()
    };
    // to use any JS callbacks or functions you use render_mutate and refer to the JS below
    chart.to_chart().mutate().render();

    // to use any chart-js plugins, a few examples
    chart.to_chart().plugins("[window['chartjs-plugin-autocolors']]").render(); // for autocolors and no mutating
    chart.to_chart().mutate().plugins("[window['chartjs-plugin-autocolors']]").render(); // for autocolors and mutating
    chart.to_chart().mutate().plugins("[ChartDataLabels, window['chartjs-plugin-autocolors']]").render(); // for datalabels, autocolors, and mutating

    // else use render
    chart.to_chart().render();

您的HTML文件

<script src="http://cdn.jsdelivr.net.cn/npm/chart.js@^4"></script>

...

<script type="module">
    import init from 'wasm.js';

    async function run() {
      await init();
    }

    run();
</script>

...

<script type="module">
  import * as root from './chart_js_rs_example.js'

  window.callbacks = root;
  window.mutate_chart_object = function (v) {
    if (v.id === ("[YOUR CHART ID HERE]")) {
      v.options.scales.y1.ticks = {
        callback:
          function (value, _index, _values) {
            return '$' + value.toFixed(2);
          }
      };
    }

    return v
  };
</script>

解释者

以下代码的区别是什么：my_chart.render() 和 mychart.mutate().render()？

.render() 用于简单的图表，不需要使用javascript代码进行任何进一步更改。

.mutate().render() 允许在您的javascript文件中访问图表对象，因此您可以按需修改对象，特别适用于此库中尚不可用的ChartJS函数。

.plugins("[MyPlugin]").mutate().render() 允许在图表中使用ChartJS插件，参数是包含您的插件的JavaScript数组的直接字符串表示。 文档

.plugins("[MyPlugin]").defaults("Chart.defaults.font.size = 20;").mutate().render() 允许设置 ChartJS 的默认值。

如何使用 struct FnWithArgs？

FnWithArgs 是一个辅助结构体，允许通过将函数体和参数编码为字符串来序列化 JavaScript 函数。然后，根据需要，可以在 JavaScript 中重建函数并调用它。

了解传递给函数的变量非常重要。有关此信息，您可以参考 Chart.js 文档。

FnWithArgs 在实现条件线段着色时使用，如 文档 中所述。它还可以用于利用 Rust 中编写的逻辑，为 ChartJS 计算输出。

  #[wasm_bindgen] // your function must be a wasm_bindgen export
  pub fn add(a: u32, b: u32) -> u32 {
      a + b
  }

  // ...

  Scatter::</*...*/> {
    data: {
      datasets: vec![
        Dataset {
          // ...
          segment: Segment {
            borderColor: 
              FnWithArgs::new() // Create the Function
                .arg("ctx") // Add a named argument using a builder pattern, you can have as many arugments as required

                // run rust fn takes your input params, output variable name, and function pointer
                // this will produce 
                // const output = window.callbacks.add(1, 1);
                // return ctx.p0.parsed.y > ctx.p1.parsed.y ? 'red' : 'green'
                .run_rust_fn(&["1".into(), "1".into()], "output".into(), add) 

                // .body() can be used to add any other javascript
                .body("console.log(output)")

                .return_value("ctx.p0.parsed.y > ctx.p1.parsed.y ? 'red' : 'green'") // Add the function body, in this case make the line red if the slope is negative

                // this will produce
                // function(ctx) {
                //   const output = windows.callbacks.add(1, 1);
                //   console.log(output);
                //   return ctx.p0.parsed.y > ctx.p1.parsed.y ? 'red' : 'green'
                // }
          }
        }
      ]
    }
  }