{
return G2.render({
type: "view",
height: 320,
data: {
type: "fetch",
value:
"https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv"
},
children: [
{
type: G2PlotColumn,
encode: {
x: "letter",
y: "frequency"
},
scale: { x: { paddingInner: 0.2 } },
axis: { y: { labelFormatter: ".0%" } },
style: { background: true }
}
]
});
}
G2.render({
type: "view",
height: 320,
data: {
type: "fetch",
value:
"https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json"
},
children: [
{
type: G2PlotColumn,
encode: {
x: "year",
y: "value",
color: "type"
},
isStack: true,
labels: [{ text: "value", position: "inside" }]
},
{
type: "text",
transform: [{ type: "groupX", y: "sum", text: "sum" }],
encode: {
x: "year",
y: "value",
text: "value"
},
style: { textAlign: "center", dy: -4, fontSize: 14, fontWeight: 500 }
}
]
})
{
return G2.render({
type: "view",
height: 320,
data: whetherData,
children: [
{
type: G2PlotColumn,
encode: {
x: "月份",
y: "月均降雨量",
color: "name"
},
isGroup: true,
labels: [{ text: "月均降雨量", position: "inside" }]
},
{
type: "text",
transform: [{ type: "groupX", y: "max", text: "sum" }],
encode: {
x: "月份",
y: "月均降雨量",
text: (d) => d["月均降雨量"].toFixed(2)
},
style: {
textAlign: "center",
dy: -8,
fontSize: 14,
fontWeight: 500,
background: true
}
}
]
});
}
{
return G2.render({
type: "view",
height: 320,
data: [
{ type: "1-3秒", value: 0.16 },
{ type: "4-10秒", value: 0.125 },
{ type: "11-30秒", value: 0.24 },
{ type: "31-60秒", value: 0.19 },
{ type: "1-3分", value: 0.22 },
{ type: "3-10分", value: 0.05 },
{ type: "10-30分", value: 0.01 },
{ type: "30+分", value: 0.015 }
],
children: [
{
type: G2PlotColumn,
encode: {
x: "type",
y: "value",
color: (d) => (d.value < 0.05 ? "lower" : "normal")
},
scale: {
color: {
domain: ["lower", "normal", "higher"],
range: ["#F4664A", "#5B8FF9", "#30bf78"]
}
}
}
]
});
}
sampleData2 = fetch(
"https://gw.alipayobjects.com/os/bmw-prod/be63e0a2-d2be-4c45-97fd-c00f752a66d4.json"
).then((data) => data.json())
{
return G2.render({
type: "view",
height: 320,
data: sampleData2.slice(50, 60),
children: [
{
type: G2PlotColumn,
encode: {
x: "城市",
y: "销售额"
},
// [TODO] make slider work.
slider: { x: {} }
}
]
});
}
{
return G2.render({
type: "view",
height: 320,
data: sampleData3,
children: [
{
type: G2PlotColumn,
encode: { x: "year", y: "value", color: "country" },
isStack: true,
isPercent: true,
labels: [{ text: "value", position: "inside" }]
}
]
});
}
{
return G2.render({
type: "view",
height: 320,
data: {
type: "fetch",
value:
"https://gw.alipayobjects.com/os/antfincdn/jSRiL%26YNql/percent-column.json"
},
interaction: [
{
type: "elementHighlightByColor",
link: true
}
],
children: [
{
type: G2PlotColumn,
encode: { x: "year", y: "value", color: "type" },
isStack: true,
isPercent: true,
state: {
active: {
linkFill: (d) => (d.state === "CA" ? "red" : undefined),
stroke: "#000",
strokeWidth: 1,
linkFillOpacity: 0.3,
zIndex: 1
},
inactive: {
opacity: 0.6
}
}
}
]
});
}
G2PlotColumn = {
function G2PlotColumn(options) {
const {
style = {},
scale,
axis,
legend,
slider,
scrollbar,
labels
} = options;
const DEFAULT_BACKGROUND_OPTIONS = {
style: { fillOpacity: 0.15, fill: "rgb(180, 180, 180)" }
};
const { background } = style;
const primary = {
...defineMark("interval", options, {}, "column"),
scale: assignDeep({ x: { paddingOuter: 0.2, paddingInner: 0.2 } }, scale),
axis: assignDeep({ x: { title: false } }, axis),
legend,
slider,
scrollbar,
labels,
style: omitObject(style, ["background"])
};
const backgroundDescriptor = assignDeep(
{},
defineMark("interval", options, DEFAULT_BACKGROUND_OPTIONS, "background"),
{
encode: { y: 1 },
scale: { y: { independent: true, range: [0, 1] } },
axis: { y: false }
}
);
return () => {
return compact([background && backgroundDescriptor, primary]);
};
}
G2PlotColumn.props = { composite: true };
return G2PlotColumn;
}
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.
