G2: Gallery🔧 G2: Bar Chart🔧 G2: Bar Chart, Horizontal🔧 G2: Bar Chart, Diverging🔧 G2: Stacked Bar Chart🔧 G2: Stacked Bar Chart, Horizontal🔧 G2: Stacked Bar Chart, Normalized🔧 G2: Bar Chart, Grouped🔧 G2: Stacked Bar Chart, Diverging🔧 G2: Marimekko Chart🔧 G2: World History Timeline🔧 G2: Stacked Bar Chart, Revenue by Music Format, 1973–2018🔧 G2: Bars, Vega-Lite🔧 G2: Pie Chart, Theta🔧 G2: Electricity Usage of Mike Bostock, 2019🔧 G2: The Impact of VaccinesG2: Streamgraph TransitionsG2: Map DemoG2: Utils
G2: Radical Bars, G24.0
md`${h2({
title: "Bar, Radial",
link: "https://g2.antv.vision/zh/examples/bar/basic#radial-bar"
})}
- [ ] Support \`'#BAE7FF-#1890FF-#0050B3'\`.
- [ ] Axis is placed incorrectly with innerRadius.
- [ ] Support \`domainMax\` and \`domainMin\`.
`
{
const chart = new G2.Chart();
chart
.coordinate({ type: "transpose" })
.coordinate({ type: "polar", innerRadius: 0.1 });
chart
.interval()
.data([
{ question: "问题 1", percent: 0.21 },
{ question: "问题 2", percent: 0.4 },
{ question: "问题 3", percent: 0.49 },
{ question: "问题 4", percent: 0.52 },
{ question: "问题 5", percent: 0.53 },
{ question: "问题 6", percent: 0.84 },
{ question: "问题 7", percent: 1.0 },
{ question: "问题 8", percent: 1.2 }
])
.scale("y", { domain: [0, 2] })
.scale("x", { range: [1, 0], padding: 0.1, guide: { type: "axisX" } })
.scale("color", {
type: "linear",
range: ["#BAE7FF", "#1890FF", "#0050B3"]
})
.encode("x", "question")
.encode("y", "percent")
.encode("color", "percent");
return chart.render().node();
}
{
const chart = new G2.Chart();
chart.coordinate({ type: "theta", innerRadius: 0.35, radius: 0.75 });
chart
.interval()
.data([
{ type: "1-3秒", value: 0.16 },
{ type: "4-10秒", value: 0.125 },
{ type: "11-30秒", value: 0.2 },
{ type: "1-3分", value: 0.2 },
{ type: "3-10分", value: 0.05 },
{ type: "10-30分", value: 0.01 },
{ type: "30+分", value: 0.015 }
])
.scale("x", { padding: 0.2, range: [1, 0] })
.encode("x", "type")
.encode("y", "value")
.encode("color", (d) =>
d.type === "10-30分" || d.type === "30+分" ? "high" : "low"
)
.style("radius", 10);
// chart
// .image()
// .data([0])
// .scale("x", { type: "identity", independent: true })
// .scale("y", { type: "identity", independent: true })
// .encode(
// "src",
// "https://gw.alipayobjects.com/mdn/rms_ef85c6/afts/img/A*0DYiQKP08cQAAAAAAAAAAAAAARQnAQ"
// )
// .encode("x", 0.5)
// .encode("y", 0)
// .style("width", 100)
// .style("height", 80);
return chart.render().node();
}
{
const chart = new G2.Chart();
chart.data([
{ term: "Zombieland", count: 9 },
{ term: "Wieners", count: 8 },
{ term: "Toy Story", count: 8 },
{ term: "trashkannon", count: 7 },
{ term: "the GROWLERS", count: 6 },
{ term: "mudweiser", count: 6 },
{ term: "ThunderCats", count: 4 },
{ term: "The Taqwacores - Motion Picture", count: 4 },
{ term: "The Shawshank Redemption", count: 2 },
{ term: "The Olivia Experiment", count: 1 }
]);
chart.coordinate({ type: "theta", innerRadius: 0.2, endAngle: Math.PI });
chart
.interval()
.scale("x", { range: [1, 0], padding: 0.5 })
.encode("x", "term")
.encode("y", "count");
chart
.point()
.scale("x", { range: [1, 0], padding: 0.5 })
.encode("x", "term")
.encode("y", "count");
return chart.render().node();
}
{
const chart = new G2.Chart();
chart.coordinate({ type: "theta" });
chart
.interval()
.data({
value: [
{ State: "WY", 小于5岁: 25635, "5至13岁": 1890, "14至17岁": 9314 },
{ State: "DC", 小于5岁: 30352, "5至13岁": 20439, "14至17岁": 10225 },
{ State: "VT", 小于5岁: 38253, "5至13岁": 42538, "14至17岁": 15757 },
{ State: "ND", 小于5岁: 51896, "5至13岁": 67358, "14至17岁": 18794 },
{ State: "AK", 小于5岁: 72083, "5至13岁": 85640, "14至17岁": 22153 }
],
transform: [
{
type: "fold",
fields: ["小于5岁", "5至13岁", "14至17岁"],
as: ["age", "population"]
}
]
})
.scale("x", { range: [1, 0], paddingInner: 0.1, guide: { type: "axisX" } })
.scale("y", { domain: [0, 200000] })
.encode("x", "State")
.encode("y", "population")
.encode("color", "age");
return chart.render().node();
}
import { h2 } from "@pearmini/g2-utils"
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.
