某基金近 4 季度资产变动

<!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="某基金近 4 季度资产变动">
    <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, ',');
  }
  var data = [{
    value: -139255.5,
    season: '第四季'
  }, {
    value: 51926.5,
    season: '第三季'
  }, {
    value: -49959.4,
    season: '第二季'
  }, {
    value: -37099.9,
    season: '第一季'
  }];
  var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio,
    padding: [45, 'auto', 'auto']
  });
  chart.source(data);
  chart.axis('value', false);
  chart.tooltip(false);
  chart.legend({
    custom: 'true',
    items: [{
      name: '净申购',
      marker: 'circle',
      fill: '#FC674D'
    }, {
      name: '净赎回',
      marker: 'circle',
      fill: '#9AC2AB'
    }],
    align: 'right',
    itemWidth: null
  });
  chart.interval().position('season*value').color('value', function(val) {
    return val > 0 ? '#FC674D' : '#9AC2AB';
  }).size(80);

// 辅助元素
  data.forEach(function(obj, index) {
    // 文字部分
    var color = obj.value > 0 ? '#FC674D' : '#9AC2AB';
    chart.guide().text({
      position: [obj.season, obj.value > 0 ? obj.value : 0],
      content: numberToMoney(obj.value),
      style: {
        fill: color,
        textBaseline: 'bottom'
      },
      offsetY: -5
    });
    // 背景部分
    var offset = 0.46;
    chart.guide().rect({
      start: [index - offset, 'max'],
      end: [index + offset, 'min'],
      style: {
        fill: '#f8f8f8'
      }
    });
  });

chart.guide().text({
    position: ['min', 'max'],
    content: '单位（万元）',
    style: {
      textBaseline: 'middle',
      textAlign: 'start'
    },
    offsetY: -23
  });

chart.render();
</script>

</body>
</html>

图表简介

柱状图，使用垂直的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。

了解更多

图表用法

柱状图有别于直方图，柱状图无法显示数据在一个区间内的连续变化趋势。柱状图描述的是分类数据，回答的是每一个分类中“有多少？”这个问题。需要注意的是，当柱状图显示的分类很多时会导致分类名层叠等显示问题。

Gallery

图表交互

折线图

面积图

柱状图

饼图

雷达图

点图

股票图

功能组件

其他图表

某基金近 4 季度资产变动

图表简介

图表用法