antvis/G2

G2 5.2.7中柱状图X轴日期刻度线过长,轴刻度间距怎么设置大点或者限制轴刻度数目,显示的宽松一些 #6561

ustcfury posted onGitHub

问题描述

G2 5.2.7中柱状图X轴日期刻度线过长,轴刻度间距怎么设置大点或者限制轴刻度数目,显示的宽松一些

重现链接

https://codesandbox.io/p/sandbox/nervous-sara-ycqz7h?file=%2Fsrc%2Findex.js%3A639%2C6

重现步骤

/**

A recreation of this demo: https://www.highcharts.com.cn/demo/highcharts/variwide */ import { Chart } from '@antv/g2'; const chart = new Chart({ container: 'container', width: 1000, });

chart .interval() .data([ { "Time": 1734076837000, "name": "$appInstanceId", "value": 5.083333333333333 }, { "Time": 1734080437000, "name": "$appInstanceId", "value": 5.266666666666667 }, { "Time": 1734084037000, "name": "$appInstanceId", "value": 5.833333333333333 }, { "Time": 1734087637000, "name": "$appInstanceId", "value": 0.5 }, { "Time": 1734091237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734094837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734098437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734102037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734105637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734109237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734112837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734116437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734120037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734123637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734127237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734130837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734134437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734138037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734141637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734145237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734148837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734152437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734156037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734159637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734163237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734166837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734170437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734174037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734177637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734181237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734184837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734188437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734192037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734195637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734199237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734202837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734206437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734210037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734213637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734217237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734220837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734224437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734228037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734231637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734235237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734238837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734242437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734246037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734249637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734253237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734256837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734260437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734264037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734267637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734271237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734274837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734278437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734282037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734285637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734289237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734292837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734296437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734300037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734303637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734307237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734310837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734314437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734318037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734321637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734325237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734328837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734332437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734336037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734339637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734343237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734346837000, "name": "$appInstanceId", "value": 0.06666666666666667 }, { "Time": 1734350437000, "name": "$appInstanceId", "value": 2.966666666666667 }, { "Time": 1734354037000, "name": "$appInstanceId", "value": 2.2 }, { "Time": 1734357637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734361237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734364837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734368437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734372037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734375637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734379237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734382837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734386437000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734390037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734393637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734397237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734400837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734404437000, "name": "$appInstanceId", "value": 1.3 }, { "Time": 1734408037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734411637000, "name": "$appInstanceId", "value": 0.5 }, { "Time": 1734415237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734418837000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734422437000, "name": "$appInstanceId", "value": 3.3333333333333335 }, { "Time": 1734426037000, "name": "$appInstanceId", "value": 4.2 }, { "Time": 1734429637000, "name": "$appInstanceId", "value": 3.8333333333333335 }, { "Time": 1734433237000, "name": "$appInstanceId", "value": 3.8666666666666667 }, { "Time": 1734436837000, "name": "$appInstanceId", "value": 3.933333333333333 }, { "Time": 1734440437000, "name": "$appInstanceId", "value": 3.8333333333333335 }, { "Time": 1734444037000, "name": "$appInstanceId", "value": 3.933333333333333 }, { "Time": 1734447637000, "name": "$appInstanceId", "value": 4 }, { "Time": 1734451237000, "name": "$appInstanceId", "value": 3.8333333333333335 }, { "Time": 1734454837000, "name": "$appInstanceId", "value": 3.933333333333333 }, { "Time": 1734458437000, "name": "$appInstanceId", "value": 3.933333333333333 }, { "Time": 1734462037000, "name": "$appInstanceId", "value": 3.8333333333333335 }, { "Time": 1734465637000, "name": "$appInstanceId", "value": 4 }, { "Time": 1734469237000, "name": "$appInstanceId", "value": 3.8333333333333335 }, { "Time": 1734472837000, "name": "$appInstanceId", "value": 3.8666666666666667 }, { "Time": 1734476437000, "name": "$appInstanceId", "value": 3.8666666666666667 }, { "Time": 1734480037000, "name": "$appInstanceId", "value": 3.9 }, { "Time": 1734483637000, "name": "$appInstanceId", "value": 3.933333333333333 }, { "Time": 1734487237000, "name": "$appInstanceId", "value": 3.8666666666666667 }, { "Time": 1734490837000, "name": "$appInstanceId", "value": 3.8666666666666667 }, { "Time": 1734494437000, "name": "$appInstanceId", "value": 6.65 }, { "Time": 1734498037000, "name": "$appInstanceId", "value": 6.966666666666667 }, { "Time": 1734501637000, "name": "$appInstanceId", "value": 4.95 }, { "Time": 1734505237000, "name": "$appInstanceId", "value": 5.95 }, { "Time": 1734508837000, "name": "$appInstanceId", "value": 8.95 }, { "Time": 1734512437000, "name": "$appInstanceId", "value": 6.983333333333333 }, { "Time": 1734516037000, "name": "$appInstanceId", "value": 2.9833333333333334 }, { "Time": 1734519637000, "name": "$appInstanceId", "value": 9.1 }, { "Time": 1734523237000, "name": "$appInstanceId", "value": 5.083333333333333 }, { "Time": 1734526837000, "name": "$appInstanceId", "value": 8.116666666666667 }, { "Time": 1734530437000, "name": "$appInstanceId", "value": 3.6 }, { "Time": 1734534037000, "name": "$appInstanceId", "value": 3.9 }, { "Time": 1734537637000, "name": "$appInstanceId", "value": 4.016666666666667 }, { "Time": 1734541237000, "name": "$appInstanceId", "value": 4.083333333333333 }, { "Time": 1734544837000, "name": "$appInstanceId", "value": 2.433333333333333 }, { "Time": 1734548437000, "name": "$appInstanceId", "value": 0.13333333333333333 }, { "Time": 1734552037000, "name": "$appInstanceId", "value": 0.13333333333333333 }, { "Time": 1734555637000, "name": "$appInstanceId", "value": 0.05 }, { "Time": 1734559237000, "name": "$appInstanceId", "value": 0.06666666666666667 }, { "Time": 1734562837000, "name": "$appInstanceId", "value": 0.16666666666666666 }, { "Time": 1734566437000, "name": "$appInstanceId", "value": 0.1 }, { "Time": 1734570037000, "name": "$appInstanceId", "value": 0.06666666666666667 }, { "Time": 1734573637000, "name": "$appInstanceId", "value": 0.06666666666666667 }, { "Time": 1734577237000, "name": "$appInstanceId", "value": 2.966666666666667 }, { "Time": 1734580837000, "name": "$appInstanceId", "value": 4.016666666666667 }, { "Time": 1734584437000, "name": "$appInstanceId", "value": 1.4666666666666666 }, { "Time": 1734588037000, "name": "$appInstanceId", "value": 0.4 }, { "Time": 1734591637000, "name": "$appInstanceId", "value": 0.8333333333333334 }, { "Time": 1734595237000, "name": "$appInstanceId", "value": 2.2333333333333334 }, { "Time": 1734598837000, "name": "$appInstanceId", "value": 1.3333333333333333 }, { "Time": 1734602437000, "name": "$appInstanceId", "value": 1.8666666666666667 }, { "Time": 1734606037000, "name": "$appInstanceId", "value": 1.8666666666666667 }, { "Time": 1734609637000, "name": "$appInstanceId", "value": 1.75 }, { "Time": 1734613237000, "name": "$appInstanceId", "value": 1.2333333333333334 }, { "Time": 1734616837000, "name": "$appInstanceId", "value": 1.6 }, { "Time": 1734620437000, "name": "$appInstanceId", "value": 1.2833333333333334 }, { "Time": 1734624037000, "name": "$appInstanceId", "value": 2.466666666666667 }, { "Time": 1734627637000, "name": "$appInstanceId", "value": 0.16666666666666666 }, { "Time": 1734631237000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734634837000, "name": "$appInstanceId", "value": 0.016666666666666666 }, { "Time": 1734638437000, "name": "$appInstanceId", "value": 0.016666666666666666 }, { "Time": 1734642037000, "name": "$appInstanceId", "value": 0.08333333333333333 }, { "Time": 1734645637000, "name": "$appInstanceId", "value": 0.016666666666666666 }, { "Time": 1734649237000, "name": "$appInstanceId", "value": 0.1 }, { "Time": 1734652837000, "name": "$appInstanceId", "value": 0.06666666666666667 }, { "Time": 1734656437000, "name": "$appInstanceId", "value": 0.016666666666666666 }, { "Time": 1734660037000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734663637000, "name": "$appInstanceId", "value": 0 }, { "Time": 1734667237000, "name": "$appInstanceId", "value": 0.11666666666666667 }, { "Time": 1734670837000, "name": "$appInstanceId", "value": 0.05 }, { "Time": 1734674437000, "name": "$appInstanceId", "value": 0.03333333333333333 }, { "Time": 1734678037000, "name": "$appInstanceId", "value": 2.0166666666666666 }, { "Time": 1734681637000, "name": "$appInstanceId", "value": 2.2333333333333334 } ]) .encode('x', (d)=>new Date(d.Time)) .encode('y', 'value') .encode('color', 'name') .transform({ type: "stackY" }) .axis("x", { title: null, tick: false, // 刻度值 labelAutoHide: true, labelAlign: "horizontal", labelAutoEllipsis: true, labelAutoWrap: false, labelAutoRotate: false, }) chart.render();

预期行为

能够增加刻度间的间距,使其不那么紧凑

平台

No response

屏幕截图或视频(可选)

image

补充说明(可选)

No response


设置 scale.x.type 等于 log。

posted by hustcc 4 months ago

设置 scale.x.type 等于 log。

不行呀 会报错的 柱状图的type只能是band

posted by ustcfury 4 months ago

说错了,设置为 time。

posted by hustcc 4 months ago

不行呀 会报错的 柱状图的type只能是band

time 也不行呀 会报错的 在5.0以后版本

posted by ustcfury 4 months ago

Fund this Issue

$0.00
Funded

Pull requests