{
return G2.render({
type: "view",
height: 320,
children: [
{
type: G2PlotLine,
data: {
type: "fetch",
value:
"https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json"
},
encode: {
x: (d) => new Date(d.Date),
y: "scales"
},
scale: { x: { mask: "YYYY-MM", nice: true } },
axis: { y: { size: 50 } }
}
]
});
}
{
return G2.render({
type: "view",
height: 320,
data: {
type: "fetch",
value:
"https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json"
},
children: [
{
type: G2PlotLine,
encode: {
x: (d) => new Date(d.year),
y: "value",
color: "category"
},
scale: { x: { mask: "YYYY-MM", nice: true } },
axis: { y: { title: false } },
style: {
point: true,
pointOpacity: (datum, i, data) => filterPoint(data, datum, "category")
}
// todo 后续内置处理 point
// transform: [{ type: "sample", thresholds: 200 }]
}
]
});
}
{
return G2.render({
type: "view",
height: 320,
data: {
type: "fetch",
value:
"https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json"
},
children: [
{
type: G2PlotLine,
encode: {
x: (d) => new Date(d.year),
y: "value",
color: "category",
pointShape: (d) => (d.category !== "Gas fuel" ? "primary" : "second")
},
scale: {
x: { mask: "YYYY-MM", nice: true },
pointShape: {
domain: ["primary", "second"],
range: ["point", "square"]
}
},
axis: { y: { title: false } },
style: {
point: true,
pointOpacity: (datum, i, data) => filterPoint(data, datum, "category")
}
// todo 后续内置处理 point
// transform: [{ type: "sample", thresholds: 200 }]
}
]
});
}
{
return G2.render({
type: "view",
height: 320,
data: {
type: "fetch",
value:
"https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json"
},
children: [
{
type: G2PlotLine,
encode: {
x: (d) => new Date(d.year),
y: "value",
color: "category"
},
isStack: true,
scale: { x: { mask: "YYYY-MM", nice: true } },
axis: { y: { title: false } },
style: { point: false, area: true }
}
]
});
}
{
return G2.render({
type: "view",
height: 320,
data,
clip: true,
children: [
{
type: G2PlotLine,
encode: {
x: (d) => new Date(d.time),
y: "value",
lineShape: "smooth",
areaShape: "smooth"
},
scale: {
x: { mask: "MM/DD hh:mm" },
// todo 是否可以实现 y 轴 domain 自适应
y: { domainMin: 24, tickCount: 5 }
},
style: {
lineWidth: 2,
area: true
}
},
{
type: "lineX",
data: [new Date("2022-12-24 08:11:16")],
style: {
lineDash: [2, 4]
}
}
]
});
}
{
return G2.render({
type: "view",
height: 320,
data: {
type: "fetch",
value: "https://assets.antv.antgroup.com/g2/forecast-range.json"
},
children: [
{
// 实际线
type: G2PlotLine,
encode: {
x: (d) => new Date(d[0]),
y: (d) => d[4]
},
style: { lineWidth: 2 }
},
{
// 基线 [TODO] 希望可以不调整代码，设置 mark 的顺序：基线放到实际线的后方
type: G2PlotLine,
encode: {
x: (d) => new Date(d[0]),
y: (d) => d[3],
lineShape: "smooth"
},
style: { stroke: "#FF6B3B" }
},
{
// 异动区间
type: "area",
encode: {
x: (d) => new Date(d[0]),
y: (d) => [d[1], d[2]]
},
style: { fill: "orange", fillOpacity: 0.1 }
},
{
// 异常值
type: "point",
data: [
["01-08", 0.417885699969663],
["01-23", 0.706678090635692],
["03-12", 6.0515889109663]
],
encode: {
x: (d) => new Date(d[0]),
y: (d) => d[1],
shape: "point",
size: 3
},
style: { fill: "#FF6B3B", stroke: "#fff", lineWidth: 1 }
}
]
});
}
{
return G2.render({
type: "view",
width: 800,
height: 320,
data: multipleYAxesData.filter((d) => d.time !== null),
interactions: [{ type: "tooltip" }],
children: [
{
type: G2PlotLine,
encode: {
x: (d) => new Date(d.time),
y: "Energy",
color: "#5B8FF9"
},
scale: { y: { independent: true, domain: [0, 300], tickCount: 5 } },
style: { connectNulls: true, connectStroke: "#5B8FF9", lineWidth: 2 },
axis: {
y: { title: false, tick: false, labelFormatter: (d) => `${d} W` }
}
},
{
type: G2PlotLine,
encode: {
x: (d) => new Date(d.time),
y: "Temperature"
// color: "rgb(115, 191, 105)"
},
scale: { y: { independent: true, domain: [0, 60], tickCount: 5 } },
axis: {
y: {
size: 40,
grid: false,
position: "right",
title: false,
tick: false,
labelFormatter: (d) => `${d} °C`
}
},
style: {
point: true,
connectNulls: true,
// connectStroke: "rgb(115, 191, 105)",
connectLineWidth: 2
}
},
{
type: G2PlotLine,
encode: {
x: (d) => new Date(d.time),
y: "Pressure",
color: "rgb(242, 204, 12)"
},
scale: { y: { domain: [0, 450], tickCount: 5 } },
axis: {
y: {
size: 50,
grid: false,
position: "right",
title: false,
tick: false,
labelFormatter: (d) => `${d} kPa`
}
},
style: {
connectNulls: true,
connectStroke: "rgb(242, 204, 12)",
connectLineWidth: 2
}
}
]
});
}
{
const data = [
{ date: "07-08", uv: 870, rising: 0.58 },
{ date: "07-09", uv: 1680, rising: 0.64 },
{ date: "07-10", uv: 630, rising: 0.69 },
{ date: "07-11", uv: 1060, rising: 0.58, forecast: true },
{ date: "07-12", uv: 890, rising: 0.88, forecast: true }
];
return G2.render({
type: "view",
height: 333,
data,
children: [
{
type: "interval",
encode: {
x: "date",
y: "uv",
color: () => "uv"
},
scale: {
x: { paddingInner: 0.25, paddingOuter: 0.2 },
y: { domain: [0, 2500], nice: true, tickCount: 5 }
},
axis: {
y: { labelFormatter: "~s" },
x: {
labelFillOpacity: (item) => {
const datum = data.find((d) => d.date === item.label);
return datum?.forecast ? 0.2 : 1;
}
}
},
style: {
fillOpacity: (d) => (d.forecast ? 0.25 : 1)
}
},
{
type: G2PlotLine,
encode: {
x: "date",
y: "rising",
color: () => "rising"
},
labels: [
{ text: "rising", formatter: ".0%", textAlign: "center", dy: -8 }
],
scale: { y: { independent: true, domain: [0, 1] } },
axis: {
y: {
labelFormatter: ".0%",
position: "right",
tick: false,
grid: false,
size: 60,
// title: "同比上涨 (%)"
title: false
}
},
style: {
lineWidth: 2,
point: true
}
}
]
});
}
{
return G2.render({
type: "view",
height: 320,
data: sampleData2,
children: [
{
type: G2PlotLine,
encode: {
x: (d) => new Date(d.year),
y: "value",
color: "category",
pointShape: (d) => (d.category === "Gas fuel" ? "diamond" : "point")
},
scale: {
pointShape: { range: ["square", "point"] }
},
axis: {
x: {
line: true,
gridStroke: "#ddd",
gridStrokeOpacity: 1,
gridLineDash: [4, 2],
gridAreaFill: "rgba(0,0,0,0.05)"
},
y: {
size: 50,
title: "排放量",
line: true,
gridStroke: "#ddd",
gridStrokeOpacity: 1,
gridLineDash: [4, 2],
gridAreaFill: "rgba(0,0,0,0.05)"
}
},
style: {
point: true
}
},
{
type: "text",
style: {
x: 4,
y: "5%",
text: "二氧化碳排放量",
background: true,
fill: "#fff",
fontSize: 12,
textBaseline: "middle",
backgroundFill: "#1890ff",
backgroundFillOpacity: 1,
shadowColor: "#fff",
shadowOffsetX: 12,
shadowOffsetY: 12,
shadowBlur: 2
}
}
]
});
}
G2PlotLine = {
// 定义一个复合 Mark
function G2PlotLine(options) {
const {
style = {},
scale,
axis,
legend,
slider,
scrollbar,
labels,
animate
} = options;
const DEFAULT_POINT_OPTIONS = {
encode: { shape: "point" },
style: { stroke: "#fff" }
};
const DEFAULT_AREA_OPTIONS = {
style: { fillOpacity: 0.25 }
};
const { point, area } = style;
const primary = {
...defineMark("line", options),
scale,
axis: assignDeep({ x: { title: false } }, axis),
legend,
slider,
scrollbar,
labels,
animate: omitObject(animate, ["point", "area"]),
style: omitObject(style, ["point", "area"])
};
return () => {
return compact([
area &&
assignDeep({}, defineMark("area", options, DEFAULT_AREA_OPTIONS), {
encode: { tooltip: null }
}),
primary,
point &&
assignDeep({}, defineMark("point", options, DEFAULT_POINT_OPTIONS), {
encode: { tooltip: null }
})
]);
};
}
G2PlotLine.props = { composite: true };
return G2PlotLine;
}
defineMark = {
return function defineMark(type, options, defaults, prefix = type) {
const {
data,
encode,
transform = [],
style,
scale = {},
animate
} = options;
return assignDeep({}, defaults, {
type,
data,
encode: { ...omit(encode, ["shape"]), ...subObject(encode, prefix) },
transform: defineTransform(options),
scale: assignDeep({}, scale, subObject(scale, prefix)),
style: subObject(style, prefix),
animate: subObject(animate, prefix),
axis: {
x: scale.x?.independent ? false : undefined,
y: scale.y?.independent ? false : undefined
},
legend: {
color: scale.color?.independent ? false : undefined
}
});
};
}
Multiple Y-Axes (more than 2!)-data-as-joinbyfield-2022-12-24 16_27_24.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.