antvis/G2

Y轴数值为0时怎么设置原点位置和X轴重合,Y轴落点值落在X轴上,如下图所示 ,版本5.1.20 #6306

yyds-yes posted onGitHub

问题描述

image

重现链接

No response

重现步骤

No response

预期行为

No response

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

<img width="680" alt="WeChatf49c58367838b96c159a60241899b913" src="https://github.com/antvis/G2/assets/24655215/754a8a17-c91d-4c68-9e64-1b48f0de16ae">

补充说明(可选)

No response


目前展示成这样了 1d22291fdc7e8976eb126b7e759dfda

posted by yikai89827 10 months ago

复现的demo

import { Chart } from '@antv/g2';
const chart = new Chart({
        container: 'case-report-trend',
        autoFit: true,
        marginBottom: 0,
        marginLeft: 0,
        marginRight: 10,
        title: '',
    });
    chart.data([
        { date: '06-10', count: 0, type: '测试' },
        { date: '06-11', count: 0, type: '测试' },
        { date: '06-12', count: 0, type: '测试' },
        { date: '06-13', count: 0, type: '测试' },
        { date: '06-14', count: 0, type: '测试' },
        { date: '06-15', count: 0, type: '测试' },
        { date: '06-16', count: 0, type: '测试' }
    ]);

    chart
        .line()
        .encode('x', 'date')
        .encode('y','count')
        .encode('shape', 'smooth')
        .encode('color', 'type')
        .scale('color', {
            domain: ['测试'],
            range: ['#FF9410'],
        })
        .style('lineWidth', 2)
        .legend(false)
        .scale('y', { independent: true, nice: true })
        .axis('x', {
            labelFill: '#fff',
            tickStroke: '#fff',
            lineStroke: '#fff',
            labelStroke: '#fff',
            labelFontSize: 12,
            tick: true,
            line: true,
            title: '',
        })
        .axis('y', {
            labelFill: '#fff',
            tickStroke: '#fff',
            lineStroke: '#fff',
            labelStroke: '#fff',
            gridStroke: '#fff',
            labelFontSize: 12,
            gridLineWidth: 1,
            gridLineDash: [1, 0],
            tick: true,
            grid: true,
            title: '',
            labelFormatter: (v: any) =>
                v >= 10000 ? (v / 10000).toFixed(0) + '万' : v,
        })
        .tooltip({ items: [{ channel: 'y', name: '测试' }] });
    chart.render();
posted by yikai89827 10 months ago

可以这样哈:

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.data([
  { date: '06-10', count: 0, type: '测试' },
  { date: '06-11', count: 0, type: '测试' },
  { date: '06-12', count: 0, type: '测试' },
  { date: '06-13', count: 0, type: '测试' },
  { date: '06-14', count: 0, type: '测试' },
  { date: '06-15', count: 0, type: '测试' },
  { date: '06-16', count: 0, type: '测试' },
]);

chart
  .line()
  .encode('x', 'date')
  .encode('y', 'count')
  .scale('y', {
    domain: [0, 1],
  });

chart.render();
posted by pearmini 10 months ago

你可以把代码复制到官网 demo 里面看看,主要是加入下面一行:

  .scale('y', {
    domain: [0, 1],
  });
posted by pearmini 10 months ago

你可以把代码复制到官网 demo 里面看看,主要是加入下面一行:

  .scale('y', {
    domain: [0, 1],
  });

嗯 可以了, 参数数组后面这个1需要根据数据动态计算得出

posted by yikai89827 10 months ago

Fund this Issue

$0.00
Funded

Pull requests