Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.8k views
in Technique[技术] by (71.8m points)

antv G2 图标,怎么控制Y轴的0轴,又怎么将负数显示在X轴下方?

问题描述

AntV G2 3.X版本 折线图,无法控制Y轴的0轴位置,也无法让负值显示在X轴下方

问题出现的环境背景及自己尝试过哪些方法

1.修改chart.scale(option)配置里的Y轴min,max,range属性等都无法处理
2.创建新的view(option),并尝试修改view中配置的min,max也无法处理

相关代码

import React, { useEffect } from 'react';
import { Chart } from '@antv/g2';
import DataSet from '@antv/data-set';
import './index.less';

const Index = () => {
  const data = [
    { x: 1, y: 100.80 },
    { x: 2, y: 111.68 },
    { x: 3, y: 111.5 },
    { x: 4, y: 101.5 },
    { x: 5, y: -58.9 },
    { x: 6, y: 10 },
    { x: 7, y: 99.00 }
  ];
  useEffect(() => {
    const axis = ['x', 'y'];
    const chart = new Chart({
      container: 'chart-container',
      autoFit: true, // 自动填充占满空间
      height: 228,
      padding: {
        top: 18,
        right: 50,
        bottom: 50,
        left: 80
      },
      width: 988
    });
    const view = chart.view({
      start: {
        x: 0,
        y: 0
      },
      end: {
        x: 1,
        y: 1
      }
    });
    view.source(data, {
      'y': {
        type: 'linear', // 连续类型数据
        min: -60, // 设置最小值
        max:112,
        nice: false, // 禁止自动美化数据
        // range:[-1, 1]
      }
    }); // 默认使用 chart 的列定义
    view.line().position(`${axis[0]}*${axis[1]}`).color('#000AB2').tooltip(false);
    view.area().position(`${axis[0]}*${axis[1]}`).color('l(90) 0:#0212B5 1:#f7f7f7').opacity(0.3);
    view.point()
      .position('x*y').shape('circle')
      .style({
          stroke: '#fff',
          lineWidth: 1
      });
    view.render();
  })
  return (
    <div className='chart-container' id='chart-container'></div>
  )
};
export default Index;

你期待的结果是什么?实际看到的错误信息又是什么?

预期:我期待着原点是Y轴的0值,负值显示在X轴下方;
结果:所有的值全部显示在X轴的上方
微信图片_20200730113319.jpg


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...