G2配置连接空值数据

volodyan

已于 2023-02-10 17:26:51 修改

阅读量172

点赞数

分类专栏： js 文章标签： javascript css html

于 2023-02-10 17:24:20 首次发布

本文链接：https://blog.csdn.net/qq_37312180/article/details/128974343

版权

js 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

connectNulls: true // 配置，连接空值数据

 chart.line({
    connectNulls: true // 配置，连接空值数据
  }).position('day*value');

G2配置连接空值数据文档链接

<!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.4.2/f2.min.js"></script>

<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.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 = [{
    day: '周一',
    value: 300
  }, {
    day: '周二',
    value: 400
  }, {
    day: '周三',
    value: null
  }, {
    day: '周四',
    value: 500
  }, {
    day: '周五',
    value: 490
  }, {
    day: '周六',
    value: 600
  }, {
    day: '周日',
    value: 900
  }];
  var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio
  });

  chart.source(data, {
    value: {
      tickCount: 5,
      min: 0
    },
    day: {
      range: [0, 1]
    }
  });
  chart.axis('day', {
    label: function label(text, index, total) {
      var textCfg = {};
      if (index === 0) {
        textCfg.textAlign = 'left';
      } else if (index === total - 1) {
        textCfg.textAlign = 'right';
      }
      return textCfg;
    }
  });
  chart.tooltip({
    showCrosshairs: true
  });
  chart.line({
    connectNulls: true // 配置，连接空值数据
  }).position('day*value');
  chart.point().position('day*value');
  chart.render();
</script>


</body>
</html>