坐标轴-grid 样式

<!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="坐标轴-grid 样式">
    <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>

<div class="chart-wrapper">
    <canvas id="mountNode"></canvas>
  </div>
  <script>
  // 格式化数字
  function numberToMoney(n) {
    return String(Math.floor(n * 100) / 100).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/f2/bubble.json', function(data) {
    var chart = new F2.Chart({
      id: 'mountNode',
      pixelRatio: window.devicePixelRatio
    });
    chart.source(data, {
      'Pro-Kopf-BIP (USD)': {
        formatter: function formatter(val) {
          return numberToMoney(val);
        }
      },
      'Anzahl Flüchtlinge': {
        formatter: function formatter(val) {
          return numberToMoney(val);
        }
      }
    });
    // 分别配置 X 轴和 Y 轴的网格线
    chart.axis('Pro-Kopf-BIP (USD)', {
      grid: {
        lineDash: null,
        stroke: '#e8e8e8',
        lineWidth: 1
      }
    });
    chart.axis('Anzahl Flüchtlinge', {
      grid: {
        lineDash: null
      }
    });
    chart.point().position('Pro-Kopf-BIP (USD)*Anzahl Flüchtlinge').color('#F04864').size('Einwohner').style({
      fillOpacity: 0.7
    });
    chart.render();
  });
</script>

</body>
</html>

Gallery

图表交互

折线图

面积图

柱状图

饼图

雷达图

点图

股票图

功能组件

其他图表

坐标轴-grid 样式