图表API

Frappe 提供了易于使用且完全可配置的 SVG 图表。您可以在 Frappe Chart 的文档中了解它们。

frappe.ui.RealtimeChart

new frappe.ui.RealtimeChart(dom_element, event_name, max_label_count, data)

创建一个新的 RealtimeChart 实例，在 Frappe Chart API 的基础上添加实时数据更新功能。

dom_element：用于渲染图表的 HTML 元素。
event_name：提供数据流的 Socket 事件。
max_label_count：x 轴上允许的最大标签数量。
data：用于初始化图表的数据。

// Empty data array
const data = {
 datasets: [
 {
 name: "Some Data",
 values: [],
 },
 ],
};

// Realtime Chart initialization
let chart = new frappe.ui.RealtimeChart("#chart", "test_event", 8, {
 title: "My Realtime Chart",
 data: data,
 type: "line",
 height: 250,
 colors: ["#7cd6fd", "#743ee2"]
});

以下是一段示例客户端代码，用于在指定的 socket 事件上渲染图表。

以下 Python 代码可以使用 Hook 功能作为定时任务执行。

data = {
 'label': 1,
 'points': [10]
}
frappe.publish_realtime('test_event', data)

label 键指定要添加到图表中的标签。points 键指定要绘制的数据点数组。points 数组中的值的数量取决于数据集的数量。

这将生成一个如下所示的图表

frappe.ui.RealtimeChart.start_updating

frappe.ui.RealtimeChart.start_updating()

开始监听指定的 socket 事件，并相应地更新 RealtimeChart。

frappe.ui.RealtimeChart.start_updating();

frappe.ui.RealtimeChart.start_updating

frappe.ui.RealtimeChart.stop_updating

frappe.ui.RealtimeChart.stop_updating()

停止监听 RealtimeChart 初始化时使用的 socket 事件。

frappe.ui.RealtimeChart.stop_updating();

frappe.ui.RealtimeChart.update_chart

frappe.ui.update_chart(label, data)

通过将标签和相关数据追加到图表末尾来手动更新 RealtimeChart。

frappe.ui.update_chart(2, [30]);