Code Monkey home page Code Monkey logo

Comments (5)

hustcc avatar hustcc commented on May 9, 2024

默认会自动 hide 一些,防止太密集:

image

如果你的 x 轴是日期类型的,那么可以 encode 数据的时候,改成日期 Date,而不是日期字符串.

encode('x', (d) => new Date(x.x_field))

from g2.

Lss0332 avatar Lss0332 commented on May 9, 2024

需求要求全展示,所以无法用隐藏部分来解决;且X轴为无规律数据(公司名称)

from g2.

hustcc avatar hustcc commented on May 9, 2024

需求要求全展示,所以无法用隐藏部分来解决;且X轴为无规律数据(公司名称)

那期望是什么?

你试试加上 滚动条 试试看,数据量比较多,有需要保障每个条的宽度,似乎只能加滚动条了。

from g2.

Lss0332 avatar Lss0332 commented on May 9, 2024

需求要求全展示,所以无法用隐藏部分来解决;且X轴为无规律数据(公司名称)

那期望是什么?

你试试加上 滚动条 试试看,数据量比较多,有需要保障每个条的宽度,似乎只能加滚动条了。

我上面发的代码和效果图是已经加了滚动条的了;
期望轴刻度的间距,可以自由调节大小(即解决柱形宽度调大后轴刻度的间距不增大带来的重叠问题,如截图里所示)

from g2.

pearmini avatar pearmini commented on May 9, 2024

期望增大柱形宽度时,能配置增大刻度间距,让柱形完整显示出来

两种方案:

  • 增大图表高度:根据数据数量计算高度
  • 使用滚动条,并且设置 ratio 配置:
import { Chart } from "@antv/g2";

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

chart.options({
  type: "interval",
  data: [
    { letter: "A", frequency: 0.08167 },
    { letter: "B", frequency: 0.01492 },
    { letter: "C", frequency: 0.02782 },
    { letter: "D", frequency: 0.04253 },
    { letter: "E", frequency: 0.12702 },
    { letter: "F", frequency: 0.02288 },
    { letter: "G", frequency: 0.02015 },
    { letter: "H", frequency: 0.06094 },
    { letter: "I", frequency: 0.06966 },
    { letter: "J", frequency: 0.00153 },
    { letter: "K", frequency: 0.00772 },
    { letter: "L", frequency: 0.04025 },
    { letter: "M", frequency: 0.02406 },
    { letter: "N", frequency: 0.06749 },
    { letter: "O", frequency: 0.07507 },
    { letter: "P", frequency: 0.01929 },
    { letter: "Q", frequency: 0.00095 },
    { letter: "R", frequency: 0.05987 },
    { letter: "S", frequency: 0.06327 },
    { letter: "T", frequency: 0.09056 },
    { letter: "U", frequency: 0.02758 },
    { letter: "V", frequency: 0.00978 },
    { letter: "W", frequency: 0.0236 },
    { letter: "X", frequency: 0.0015 },
    { letter: "Y", frequency: 0.01974 },
    { letter: "Z", frequency: 0.00074 },
  ],
  encode: { x: "letter", y: "frequency" },
  scrollbar: { x: { ratio: 0.1 } },
});

chart.render();

from g2.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.