antv g2 x轴两边留边距

问题背景:在做vue项目时,需要用到-蚂蚁数据可视化antv做数据图表。
问题:
图表的内容超出了x轴的边缘
在这里插入图片描述
这个问题看了很久,网上的解释很少,最后还是看文档终于找到了原因
源代码:

var chart = new G2.Chart({
       container: 'mountNode1',
       forceFit: true,
       height: 190,
       padding: [20, 85, 35, 45]
   });
   chart.source(data);
   chart.scale('count', {
       alias: '人数',
   });
   chart.interval().position('date*count');
   chart.render();

加上下面这一段代码就可以了

var margin = 1 / data.length;
chart.scale("date", {
    range: [margin / 2, 1 - margin / 2],
});
结果

在这里插入图片描述
官方文档解释:

range: {array}, // 输出数据的范围,默认[ 0, 1 ],格式为 [ min, max ],min 和 max 均为 0 至 1 范围的数据。
Logo

前往低代码交流专区

更多推荐