<!-- 引入 G2 文件 -->
<script src="./plugins/g2.v5.min.js"></script>
<style>
.container {
display: flex;
}
.div {
height: 500px;
}
</style>
<!-- 创建图表容器 -->
<div class="container">
<div id="mountNode1"></div>
<div id="mountNode2"></div>
<div id="mountNode3"></div>
</div>
<script>
var data = [
{
Species: "I. setosa",
type: "SepalLength",
value: 5.1,
bin: [4.3, 4.8, 5, 5.2, 5.8],
},
{
Species: "I. setosa",
type: "SepalWidth",
value: 3.5,
bin: [2.3, 3.2, 3.4, 3.7, 4.4],
},
{
Species: "I. setosa",
type: "PetalLength",
value: 1.4,
bin: [1, 1.4, 1.5, 1.6, 1.9],
},
{
Species: "I. setosa",
type: "PetalWidth",
value: 0.2,
bin: [0.1, 0.2, 0.2, 0.3, 0.6],
},
{
Species: "I. versicolor",
type: "SepalLength",
value: 7,
bin: [4.9, 5.6, 5.9, 6.3, 7],
},
{
Species: "I. versicolor",
type: "SepalWidth",
value: 3.2,
bin: [2, 2.5, 2.8, 3, 3.4],
},
{
Species: "I. versicolor",
type: "PetalLength",
value: 4.7,
bin: [3, 4, 4.35, 4.6, 5.1],
},
{
Species: "I. versicolor",
type: "PetalWidth",
value: 1.4,
bin: [1, 1.2, 1.3, 1.5, 1.8],
},
{
Species: "I. virginica",
type: "SepalLength",
value: 6.3,
bin: [4.9, 6.2, 6.5, 6.9, 7.9],
},
{
Species: "I. virginica",
type: "SepalWidth",
value: 3.3,
bin: [2.2, 2.8, 3, 3.2, 3.8],
},
{
Species: "I. virginica",
type: "PetalLength",
value: 6,
bin: [4.5, 5.1, 5.55, 5.9, 6.9],
},
{
Species: "I. virginica",
type: "PetalWidth",
value: 2.5,
bin: [1.4, 1.8, 2, 2.3, 2.5],
},
];
var newData = [];
for (let i in data) {
for (let j in data[i]["bin"]) {
newData.push({
Species: data[i]["Species"],
type: data[i]["type"],
value: data[i]["value"],
bin: data[i]["bin"][j],
});
}
}
var chart = new G2.Chart({
theme: "classic",
container: "mountNode1",
});
chart.point().data(newData).transform({ type: "jitter" }).encode("y", "bin").encode("x", "type").encode("color", "Species").encode("series", "Species").scale("color", { type: "ordinal" });
chart.render();
</script>
<script>
var chart = new G2.Chart({
theme: "classic",
container: "mountNode2",
});
chart
.box()
.data(data)
.encode("y", "bin")
.encode("x", "type")
.encode("series", "Species")
.encode("color", "Species")
.scale("color", { type: "ordinal" })
.tooltip([
{ name: "min", channel: "y" },
{ name: "q1", channel: "y1" },
{ name: "q2", channel: "y2" },
{ name: "q3", channel: "y3" },
{ name: "max", channel: "y4" },
]);
chart.render();
</script>
<script>
var newData = [];
for (let i in data) {
newData.push({
Species: data[i]["Species"],
type: data[i]["type"],
value: data[i]["value"],
});
}
var chart = new G2.Chart({
theme: "classic",
container: "mountNode3",
});
console.log(newData);
// chart.interval().data(newData).transform({ type: "dodgeX" }).encode("y", "value").encode("x", "type").encode("color", "Species").scale("color", { type: "ordinal" });
chart.interval().data(newData).encode("y", "value").encode("x", "type").encode("color", "Species").encode("series", "Species").scale("color", { type: "ordinal" });
chart.render();
</script>
因为要实现下面的需求，特意去研究了下g2，记录下
箱型图带扰动点，想要实现的效果示例如下
自从有需要在箱型图上添加扰动点这个需要之后，一直非常的纠结，好不容易找到了plotly.js这个组件，其箱型图自带可以添加所有扰动点，且不需要计算Q1这些值，非常强大，奈何其底层技术基于D3使用SVG，对canvas和webgl等适合大数据量的技术支持不好，导致了数据量大了之后页面卡顿非常，体验非常不好。然后就继续寻求其它的组件，然后就找到了支持扰动图的g2，可以选择使用SVG、canvas、webgl渲染，默认使用canvas，可以支持大数据量。看过文档和大量示例后发现g2非常灵活，实现了散点抖动图，也可以层叠加的方式叠加箱型图 。然散点图不能分组单独显示，且抖动图的x轴位置随机，每次刷新页面图形都会变化，还是无法实现需要的效果。
标签：bin,g2,data,散点图,value,柱形图,encode,type,Species From： https://www.cnblogs.com/caroline2016/p/17292935.html