基本的刻度示例
const ts = tick.blueprint.fragments({ count: 5, margin: 60, offset: 5, baseline: 0, vertical: false }, theme.tick);
graph.updateQueue(0, [[{ x: 0, y: 0, children: ts.elements }]]);
一个 2D 的坐标轴,带有刻度。
const tickTexts0: Text[] = [0, 1, 2, 3, 4, 5, 6, 7].map((item, idx) => ({
x: idx * 60,
y: 16,
content: `${item}`,
}));
const tickTexts1: Text[] = [10, 15, 20, 25, 30, 35].map((item, idx) => ({
x: -9,
y: -idx * 36,
content: `${item}`,
}));
const tick0 = tick.blueprint.fragments({ count: 8, margin: 60, offset: 5, baseline: 180 }, { borderTick: "#8ac", borderBaseline: "rgba(100, 100, 100, .35)" });
const tick1 = tick.blueprint.fragments({ count: 6, margin: 36, offset: -5, vertical: true, baseline: 420 }, { borderTick: "#8ac", borderBaseline: "rgba(100, 100, 100, .35)" });
const n = {
x: 0,
y: 0,
children: [
{
x: 0,
y: 0,
texts: tickTexts0,
children: tick0.elements,
},
{
x: 0,
y: 0,
texts: tickTexts1,
children: tick1.elements,
}
],
};
graph.updateQueue(0, [[n]]);
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.