search

antvis / F2

📱📈An elegant, interactive and flexible charting library for mobile.
https://f2.antv.vision/zh
MIT License
7.89k stars 649 forks source link

横坐标 type 为 cat 时，有重复数据会自动合并 #666

Closed amazinglisa closed 5 years ago

amazinglisa commented 5 years ago

What problem does this feature solve?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="chart-name" content="基础柱状图">
    <title>F2 图表组件库 - AntV</title>
    <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />

</head>
<body>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>

<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2.min.js"></script>

<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<!-- 在 PC 上模拟 touch 事件 -->
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>

  <div class="chart-wrapper">
    <canvas id="mountNode"></canvas>
  </div>
  <script>
  var data = [{
    year: '1951 年',
    sales: 38
  }, {
    year: '1951 年',
    sales: 52
  }, {
    year: '1956 年',
    sales: 61
  }, {
    year: '1957 年',
    sales: 145
  }, {
    year: '1958 年',
    sales: 48
  }, {
    year: '1959 年',
    sales: 38
  }, {
    year: '1960 年',
    sales: 38
  }, {
    year: '1962 年',
    sales: 38
  }];
  var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio
  });

  chart.source(data, {
    sales: {
      tickCount: 5
    }
  });
  chart.tooltip({
    showItemMarker: false,
    onShow: function onShow(ev) {
      var items = ev.items;
      items[0].name = null;
      items[0].name = items[0].title;
      items[0].value = '¥ '   items[0].value;
    }
  });
  chart.interval().position('year*sales');
  chart.render();
</script>

</body>
</html>

坐标有两个 1951 年，但是绘制成一个柱子，我希望两个 1951 年是分开，应该如何配置？

What does the proposed API look like?

看了别的 issue，有碰到相似问题，但是不知如何解决

amazinglisa commented 5 years ago

跟这个 issue 问题是一样的，但是并没有给出解决方案：https://github.com/antvis/f2/issues/350#issue-364271467

simaQ commented 5 years ago

这种情况，你需要给数据增加一个维度，比如 type，然后根据这个 type 字段对数据进行 dodge 调整。

 var data = [{
    year: '1951 年',
    sales: 38,
    type: 'b'
  }, {
    year: '1951 年',
    sales: 52,
    type: 'a',
  }, {
    year: '1956 年',
    sales: 61,
    type: 'a'
  }, {
    year: '1957 年',
    sales: 145,
    type: 'a'
  }, {
    year: '1958 年',
    sales: 48,
    type: 'a'
  }, {
    year: '1959 年',
    sales: 38,
    type: 'a'
  }, {
    year: '1960 年',
    sales: 38,
    type: 'a'
  }, {
    year: '1962 年',
    sales: 38,
    type: 'a'
  }];
  var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio
  });

  chart.source(data, {
    sales: {
      tickCount: 5
    }
  });

  chart.interval().position('year*sales').color('type').adjust('dodge');
  chart.render();