可视化组件g2之分组箱型图、柱形图、散点图简单使用

因为要实现带扰动点的箱型图，特意去研究了下 g2，记录下。

自从有需要在箱型图上添加扰动点这个需要之后，一直非常的纠结，好不容易找到了 plotly.js 这个组件，其箱型图自带可以添加所有扰动点，且不需要计算 Q1 这些值，非常强大，奈何其底层技术基于 D3 使用 SVG，对 canvas 和 webgl 等适合大数据量的技术支持不好，导致了数据量大了之后页面卡顿非常，体验非常不好。然后就继续寻求其它的组件，然后就找到了支持扰动图的 g2，可以选择使用 SVG、canvas、webgl 渲染，默认使用 canvas，可以支持大数据量。看过文档和大量示例后发现 g2 非常灵活，实现了散点抖动图，也可以层叠加的方式叠加箱型图 。然散点图不能分组单独显示，且抖动图的x轴位置随机，每次刷新页面图形都会变化，还是无法实现需要的效果。

<!-- 引入 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();

  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>