antvis/G2

柱线混合图,坐标轴刻度不对齐,有什么方法可以对齐 #6370

Calmio-Y posted onGitHub

问题描述

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

const data = [ { time: '10:10', call: 4, waiting: 2, people: 0.2 }, { time: '10:15', call: 2, waiting: 6, people: 0.6 }, { time: '10:20', call: 13, waiting: 2, people: 0.2 }, // { time: '10:25', call: 9, waiting: 9, people: 1 }, // { time: '10:30', call: 5, waiting: 2, people: 3 }, // { time: '10:35', call: 8, waiting: 2, people: 11 }, // { time: '10:40', call: 13, waiting: 1, people: 2 }, ]; const xx = [{ "品牌": "黄河啤酒", "同比": -0.0215, "年份": "2023", "同期收入": 54418, "公司": "太古可口可乐(中国)有限公司", "开始日期": "2023-08-11T00:00:00", "事业部": "宝翼制罐", "是否达成": true, "增长": -5329, "备注": "A", "环比": 0.11, "上期收入": null, "月份1": 1, "结束日期": "2023-08-03T00:00:00", "产品": "普通500铝", "本期收入": 0, "月份": "3月", "年龄": "33", "是否达到预测": "达到预测销售额" }, { "品牌": "青岛啤酒", "同比": 0.33, "年份": "2023", "同期收入": 50264, "公司": "青岛啤酒(徐州)彭城有限公司", "开始日期": "2023-07-07T00:00:00", "事业部": "兰州制罐", "是否达成": true, "增长": -2332.444, "备注": "A", "环比": 0.33, "上期收入": 50264.253, "月份1": 2, "结束日期": "2023-12-30T05:06:06", "产品": "330铝", "本期收入": 23566, "月份": "3月", "年龄": "66", "是否达到预测": "未达到预测销售额" }, { "品牌": "百威啤酒", "同比": 0.11, "年份": "2022", "同期收入": 65048, "公司": "无锡市苏南五彩农业科技发展有限公司", "开始日期": "2023-08-11T00:00:00", "事业部": "安徽制罐", "是否达成": true, "增长": -2060, "备注": "A", "环比": 0.28, "上期收入": 44444, "月份1": 3, "结束日期": "2023-01-06T14:05:05", "产品": "普通330铝", "本期收入": 64456, "月份": "3月", "年龄": "33", "是否达到预测": "达到预测销售额" }, { "品牌": "黄河啤酒", "同比": 0.22, "年份": "2023", "同期收入": 43062, "公司": "太古可口可乐(中国)有限公司", "开始日期": "2022-05-01T02:00:00", "事业部": "两片罐事业部", "是否达成": false, "增长": -3073, "备注": "B", "环比": 0.27, "上期收入": 33333, "月份1": 4, "结束日期": "2023-08-11T13:00:00", "产品": "普通330铝", "本期收入": 33333, "月份": "3月", "年龄": "55", "是否达到预测": "未达到预测销售额" }, { "品牌": "千岛湖啤酒", "同比": 0.45, "年份": "2023", "同期收入": 43062, "公司": "青岛啤酒(徐州)彭城有限公司", "开始日期": "2023-08-03T20:06:04", "事业部": "河北制罐", "是否达成": true, "增长": -5281, "备注": "B", "环比": 0.3, "上期收入": 33333, "月份1": 5, "结束日期": "2023-08-12T00:00:00", "产品": "普通330铝", "本期收入": 33333, "月份": "4月", "年龄": "26", "是否达到预测": "达到预测销售额" }, { "品牌": "百威啤酒", "同比": 0.66, "年份": "2022", "同期收入": 82342, "公司": "无锡市苏南五彩农业科技发展有限公司", "开始日期": "2023-07-07T00:00:00", "事业部": "成都制罐", "是否达成": false, "增长": -6105, "备注": "D", "环比": 0.33, "上期收入": 33333, "月份1": 6, "结束日期": "2023-08-13T00:00:00", "产品": "普通500铝", "本期收入": 33333, "月份": "4月", "年龄": "31", "是否达到预测": "达到预测销售额" }, { "品牌": "千岛湖啤酒", "同比": 0.77, "年份": "2023", "同期收入": 79286, "公司": "无锡市苏南五彩农业科技发展有限公司", "开始日期": "2023-07-07T10:11:05", "事业部": "佛山制罐", "是否达成": true, "增长": -4954, "备注": "C", "环比": 0.39, "上期收入": 79286, "月份1": 7, "结束日期": "2023-08-14T00:00:00", "产品": "普通500铝", "本期收入": 51231, "月份": "3月", "年龄": "44", "是否达到预测": "未达到预测销售额" }, { "品牌": "千岛湖啤酒", "同比": 0.35, "年份": "2023", "同期收入": 43473, "公司": "太古可口可乐(中国)有限公司", "开始日期": "2023-07-07T03:00:00", "事业部": "武汉制罐", "是否达成": false, "增长": 0, "备注": "C", "环比": 0.25, "上期收入": 43473, "月份1": 8, "结束日期": "2023-06-08T00:00:00", "产品": "330铝", "本期收入": null, "月份": "3月", "年龄": "35", "是否达到预测": "达到预测销售额" }, { "品牌": "雪花啤酒", "同比": 0.46, "年份": "2023", "同期收入": 56775, "公司": "太古可口可乐(中国)有限公司", "开始日期": "2023-07-07T00:00:00", "事业部": "河南制罐", "是否达成": true, "增长": -5937.2334, "备注": "D", "环比": 0.15, "上期收入": 56775, "月份1": 9, "结束日期": "2023-07-07T00:00:00", "产品": "普通330铝", "本期收入": -8233, "月份": "4月", "年龄": "64", "是否达到预测": "未达到预测销售额" }, { "品牌": "青岛啤酒", "同比": 0.25, "年份": "2023", "同期收入": 100058, "公司": "青岛啤酒(徐州)彭城有限公司", "开始日期": "2023-08-03T00:00:00", "事业部": "哈尔滨制罐", "是否达成": false, "增长": 0.55, "备注": "C", "环比": 0.34, "上期收入": 100058, "月份1": 10, "结束日期": "2023-08-03T23:59:59", "产品": "普通500铝", "本期收入": 82345, "月份": "4月", "年龄": "23", "是否达到预测": "未达到预测销售额" }, { "品牌": "雪花啤酒", "同比": 0.0215, "年份": "2022", "同期收入": 43062, "公司": "青岛啤酒(徐州)彭城有限公司", "开始日期": "2023-08-03T00:00:00", "事业部": "沧州制罐", "是否达成": true, "增长": -5340, "备注": "D", "环比": 0.18, "上期收入": 150000, "月份1": 11, "结束日期": "2023-06-23T00:00:00", "产品": "330铝", "本期收入": 25144, "月份": "4月", "年龄": "49", "是否达到预测": "达到预测销售额" }, { "品牌": "雪花啤酒", "同比": 0.21, "年份": "2022", "同期收入": 43062, "公司": "无锡市苏南五彩农业科技发展有限公司", "开始日期": "2023-01-01T03:03:00", "事业部": "北京制罐", "是否达成": false, "增长": null, "备注": "B", "环比": 0.41, "上期收入": 72355, "月份1": 12, "结束日期": "2023-08-10T00:00:00", "产品": "普通500铝", "本期收入": 41235, "月份": "3月", "年龄": "51", "是否达到预测": "未达到预测销售额" } ] const chart = new Chart({ container: 'container', autoFit: true, });

chart.data(xx);

chart .interval() .encode('x', '事业部') .encode('y', '上期收入') .axis("y", { "grid": true, gridStroke: '#0f0', gridStrokeOpacity: 1, }) .scale("y", { "nice": false,

// "range":[0,160000],
    // "_range": {
    //     "min": 0,
    //     "max": 150000,
    //     // "tick": 30000
    // },
// "domainMax":15000,
    "key": "main",
    "domain": [0, 130000],
    "tickCount": 5,
// tickMethod:(min,max,count)=>{
//     return [0, 50000, 100000, 150000]
// },

    "key": "main"
})

chart .line() .encode('x', '事业部') .encode('y', '同比') .encode('shape', 'smooth') .style('stroke', '#fdae6b') .style('lineWidth', 2) .scale("y", { "nice": false,

    // "_range": {
    //     "min": 0,
    //     "max": 2,
    //     "tick": 1
    // },
    "key": "sub",
    "domain": [0, 2.25],
    "tickCount": 5, 
// tickMethod:(min,max,count)=>{
//     return [0, 0.5, 1, 1.5, 2, 2.5, 3]
// },
    "key": "sub"
})
.axis('y', {
    position: 'right',
    grid: true,
    title: '同比',
    titleFill: '#fdae6b',
    gridStroke: '#f00',
    gridStrokeOpacity: 1,
});

chart.render();

重现链接

No response

重现步骤

No response

预期行为

对于柱线混合有什么方法可以使双y轴刻度对齐

平台

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

屏幕截图或视频(可选)

image

补充说明(可选)

No response


这个 PR https://github.com/antvis/G2/pull/6380 会提供一个解决的思路。

posted by pearmini 9 months ago

@pearmini image 是需要发版才可以吗? image 我在案例中没有生效

posted by Calmio-Y 9 months ago

对,还没有发版本,这个 PR 还需要调整一下。

posted by pearmini 9 months ago

@pearmini image 这个是说比如y1轴有负数,刻度也不会从负数开始画,只会从0开始画刻度是吗

posted by Calmio-Y 9 months ago

@Calmio-Y 目前的实现是这样的,但是你可以尝试优化一下,目前我没有啥好的思路 😭

posted by pearmini 9 months ago

Fund this Issue

$0.00
Funded

Pull requests