render = {
const Custom = G2.createInteraction(() => ({
start: [
{
trigger: "plot:resize",
action: [
{
type: () => {
return (context) => {
const { event, options: plotOptions, shared } = context;
const { updatedOptions = plotOptions } = shared;
const {
detail: { shiftX }
} = event;
const newOptions = {
...updatedOptions,
width: updatedOptions.width + shiftX
};
if (newOptions.width < 300) {
newOptions.marks[2].encode.shape = "annotation.badge";
} else {
newOptions.marks[2].encode.shape = "annotation.text";
}
console.info("newOptions:", newOptions);
shared.updatedOptions = newOptions;
return context;
};
}
},
{
type: "plot"
}
]
}
],
end: []
}));
const context = {};
const options = {
type: "view",
height: 300,
width: 650,
paddingRight: 100,
data,
scale: {
x: {
guide: {
ticksThreshold: 6,
label: { autoHide: true, autoHideTickLine: true }
}
},
color: { guide: null }
},
interaction: [{ type: Custom }],
children: [
{
type: "line",
encode: {
x: (d) => d.date,
y: "blockchain",
color: "#5B8FF9"
}
},
{
type: "line",
encode: {
x: (d) => d.date,
y: "nlp",
color: "#61DDAA"
}
},
{
type: "annotation.text",
transform: [
{
type: "filterBy",
fields: ["date"],
callback: (d) => d === "2017-12-17"
}
],
encode: {
x: (d) => d.date,
y: "blockchain",
text: (d) =>
`${d.date}, 受比特币影响，blockchain 搜索热度达到峰值：${d.blockchain}`
},
style: {
wordWrap: true,
wordWrapWidth: 160,
fill: "#2C3542",
fillOpacity: 0.65,
lineWidth: 0,
textAlign: "left",
dy: 30,
dx: -174,
fontSize: 10,
background: {
fill: "#416180",
fillOpacity: 0.15,
radius: 2,
padding: [2, 4]
},
connector: {
stroke: "#416180",
strokeOpacity: 0.45
}
}
}
]
};
const chart = G2.render(options, context);
const { canvas } = context;
const group = canvas.appendChild(
new G2.Group({ style: { cursor: "grab", "z-index": 2 } })
);
group.appendChild(
new G2.Line({
style: {
stroke: "#F5317F",
lineWidth: 2,
radius: 2,
lineCap: "round",
x1: 600,
y1: 0,
x2: 600,
y2: 270
}
})
);
group.appendChild(
new G2.Path({
style: {
text: "drag to resize",
wordWrap: true,
wordWrapWidth: 40,
stroke: "#F5317F",
lineWidth: 3,
lineCap: "round",
path: `M612,132 L606,138 L612,144`,
cursor: "grab"
}
})
);
group.appendChild(
new G2.Path({
style: {
text: "drag to resize",
wordWrap: true,
wordWrapWidth: 40,
stroke: "#F5317F",
lineWidth: 3,
lineCap: "round",
path: `M618,132 L624,138 L618,144`,
cursor: "grab"
}
})
);
group.appendChild(
new G2.Text({
style: {
text: "drag to resize",
wordWrap: true,
wordWrapWidth: 40,
fill: "#F5317F",
fontSize: 12,
fontWeight: "lighter",
textAlign: "start",
textBaseline: "top",
x: 608,
y: 150
}
})
);
setTimeout(() => {
const { container, options: plotOptions, ...args } =
context.viewInstances?.[0] || {};
const plot = container.querySelector(".plot");
let mouseX = null;
let dragging = false;
group.addEventListener("mousedown", (e) => (dragging = true));
group.addEventListener("mousemove", (e) => {
const { offsetX, offsetY } = e;
if (dragging) {
if (mouseX === null) mouseX = offsetX;
const [x, y] = group.getPosition();
const shiftX = offsetX - mouseX;
group.setPosition([x + shiftX, y]);
plot.dispatchEvent(
new G2.CustomEvent("resize", {
shiftX
})
);
mouseX = offsetX;
}
});
document.addEventListener("mouseup", (e) => {
dragging = false;
mouseX = null;
});
}, 0);
return chart;
}
animatedCharqt = {
const Flushing = (options) => {
return ([shape], to, style, coordinate, theme) => {
const height = shape.getLocalBounds().halfExtents[1] * 2;
shape.animate(
[
{ transform: "translate(0,0)" },
{ transform: `translate(0,-${height * 0.8}px)` }
],
{
duration: 2400,
iterations: Infinity
}
);
};
};
const chart = G2.render({
type: "view",
height: 300,
width: 600,
transform: [
{
type: "fetch",
url:
"https://gw.alipayobjects.com/os/antfincdn/52Hze539Ar/series-column.data.json"
},
{ type: "fold", fields: ["value", "value-dayCompare"] }
// { type: "dodgeX" }
],
scale: {
y: {
tickCount: 5,
guide: {
formatter: (d) => `${d / 1000}`,
size: 54,
title: { style: { textAlign: "center" } }
}
},
color: { guide: null }
},
children: [
{
type: "interval",
encode: {
x: "date",
y: "value",
color: (d) => {
return d.key === "value" ? "red" : "yellow";
},
series: "key"
},
style: {
fillOpacity: 0.75,
opacity: 0.75
}
}
// {
// type: "interval",
// transform: [
// { type: "selectX", selector: "last" },
// {
// type: "filterBy",
// fields: ["key"],
// callback: (d) => d !== "value"
// }
// ],
// encode: { x: "date", y: "value", color: "key", series: "key" },
// // style: {
// // fillOpacity: 0.75,
// // fill:
// // "l(90) 0:rgba(0,0,0,0) 0.8:rgba(0,0,0,0) 0.8:rgba(255,255,255,0.7) 1:rgba(255,255,255,0)",
// // stroke:
// // '"l(90) 0:rgba(0,0,0,0) 0.8:rgba(0,0,0,0) 0.8:rgba(255,255,255,0.7) 1:rgba(255,255,255,0)"',
// // lineWidth: 0
// // },
// animate: {
// // enter: { type: Flushing, duration: 500, iterations: Infinity }
// }
// }
]
});
return chart;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
