IssueHunt
Bug Bounty (New!)
Browse
Sign in with GitHub
antvis/G2

图例显示顺序与分组柱状图绘制不同 #6328

Calmio-Y posted onGitHub

问题描述

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

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

const xx = [{ "品牌": "青岛啤酒", "同比": 0.45, "年份": "2023", "同期收入": 43062, "公司": "青岛啤酒(徐州)彭城有限公司", "开始日期": "2023-08-03T00:00:00", "事业部": "河北制罐", "是否达成": true, "增长": -5281, "备注": "B", "环比": 0.3, "上期收入": 43062, "月份1": 5, "结束日期": "2023-08-12T00:00:00", "产品": "普通330铝", "本期收入": 61223, "月份": "4月", "年龄": "26", "是否达到预测": "达到预测销售额" }, { "品牌": "青岛啤酒", "同比": 0.25, "年份": "2023", "同期收入": 100058, "公司": "青岛啤酒(徐州)彭城有限公司", "开始日期": "2023-08-03T00:00:00", "事业部": "哈尔滨制罐", "是否达成": false, "增长": null, "备注": "C", "环比": 0.34, "上期收入": 100058, "月份1": 10, "结束日期": "2023-06-01T00:00:00", "产品": "普通500铝", "本期收入": 82345, "月份": "4月", "年龄": "23", "是否达到预测": "未达到预测销售额" }, { "品牌": "青岛啤酒", "同比": 0.0215, "年份": "2022", "同期收入": 25123, "公司": "青岛啤酒(徐州)彭城有限公司", "开始日期": "2023-08-03T00:00:00", "事业部": "沧州制罐", "是否达成": true, "增长": -5340, "备注": "D", "环比": 0.18, "上期收入": 25123, "月份1": 11, "结束日期": "2023-06-23T00:00:00", "产品": "330铝", "本期收入": 0, "月份": "4月", "年龄": "49", "是否达到预测": "达到预测销售额" }, { "品牌": "百威啤酒", "同比": 0.33, "年份": "2023", "同期收入": 50264, "公司": "青岛啤酒(徐州)彭城有限公司", "开始日期": "2023-07-07T00:00:00", "事业部": "兰州制罐", "是否达成": true, "增长": 2332, "备注": "A", "环比": 0.33, "上期收入": 50264.253, "月份1": 2, "结束日期": "2023-08-09T00:00:00", "产品": "330铝", "本期收入": 23566, "月份": "3月", "年龄": "66", "是否达到预测": "未达到预测销售额" }, { "品牌": "百威啤酒", "同比": 0.22, "年份": "2023", "同期收入": 3732, "公司": "太古可口可乐(中国)有限公司", "开始日期": "2023-08-11T00:00:00", "事业部": "两片罐事业部", "是否达成": false, "增长": 3073, "备注": "B", "环比": 0.27, "上期收入": 57803, "月份1": 4, "结束日期": "2023-08-11T13:00:00", "产品": "普通330铝", "本期收入": 13342, "月份": "3月", "年龄": "55", "是否达到预测": "未达到预测销售额" }, { "品牌": "百威啤酒", "同比": 0.66, "年份": "2022", "同期收入": 82342, "公司": "无锡市苏南五彩农业科技发展有限公司", "开始日期": "2023-07-07T00:00:00", "事业部": "成都制罐", "是否达成": false, "增长": -6105, "备注": "D", "环比": 0.33, "上期收入": 82342, "月份1": 6, "结束日期": "2023-08-13T00:00:00", "产品": "普通500铝", "本期收入": -51235, "月份": "4月", "年龄": "31", "是否达到预测": "达到预测销售额" }, { "品牌": "黄河啤酒", "同比": 0.77, "年份": "2023", "同期收入": 79286, "公司": "无锡市苏南五彩农业科技发展有限公司", "开始日期": "2023-07-07T00:00:00", "事业部": "佛山制罐", "是否达成": true, "增长": -4954, "备注": "C", "环比": 0.39, "上期收入": 79286, "月份1": 7, "结束日期": "2023-08-14T00:00:00", "产品": "普通500铝", "本期收入": 51231, "月份": "3月", "年龄": "44", "是否达到预测": "未达到预测销售额" }, { "品牌": "黄河啤酒", "同比": 0.35, "年份": "2023", "同期收入": 43473, "公司": "太古可口可乐(中国)有限公司", "开始日期": "2023-07-07T00:00:00", "事业部": "武汉制罐", "是否达成": false, "增长": -2243, "备注": "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, "备注": "D", "环比": 0.15, "上期收入": 56775, "月份1": 9, "结束日期": "2023-06-09T00:00:00", "产品": "普通330铝", "本期收入": -2233, "月份": "4月", "年龄": "64", "是否达到预测": "未达到预测销售额" }, { "品牌": "千岛湖啤酒", "同比": -0.0215, "年份": "2023", "同期收入": 54418, "公司": "太古可口可乐(中国)有限公司", "开始日期": "2023-08-11T00:00:00", "事业部": "宝翼制罐", "是否达成": true, "增长": -5329, "备注": "A", "环比": 0.11, "上期收入": 54418, "月份1": 1, "结束日期": "2023-08-03T00:00:00", "产品": "330铝", "本期收入": 65222.252, "月份": "3月", "年龄": "33", "是否达到预测": "达到预测销售额" }, { "品牌": "千岛湖啤酒", "同比": 0.11, "年份": "2022", "同期收入": 65048, "公司": "无锡市苏南五彩农业科技发展有限公司", "开始日期": "2023-08-11T00:00:00", "事业部": "安徽制罐", "是否达成": true, "增长": -2060, "备注": "A", "环比": 0.28, "上期收入": 65048, "月份1": 3, "结束日期": "2023-08-10T00:00:00", "产品": "普通330铝", "本期收入": 67456, "月份": "3月", "年龄": "33", "是否达到预测": "达到预测销售额" }, { "品牌": "千岛湖啤酒", "同比": 0.21, "年份": "2022", "同期收入": 0, "公司": "无锡市苏南五彩农业科技发展有限公司", "开始日期": "2023-08-03T00:00:00", "事业部": "北京制罐", "是否达成": false, "增长": null, "备注": "B", "环比": 0.41, "上期收入": 72355, "月份1": 12, "结束日期": "2023-08-10T00:00:00", "产品": "普通500铝", "本期收入": 41235, "月份": "3月", "年龄": "51", "是否达到预测": "未达到预测销售额" } ] chart .interval() .data(xx) .transform({ "type": "dodgeX" }) .encode('x', '品牌') .encode('y', '上期收入') .encode('color', '产品')

chart.render();

重现链接

No response

重现步骤

No response

预期行为

No response

平台

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

屏幕截图或视频（可选）

image

补充说明（可选）

No response

每个组里面数据都不一样，可以将数据按照 color 字段先排序。

posted by pearmini 10 months ago

有demo吗

posted by Calmio-Y 10 months ago
chart
  .interval()
  .data(xx.sort((a, b) => a['产品'] - b['产品']))
  .transform({
    type: 'dodgeX',
    orderBy: 'series', // 这里
    reverse: true, // 这里
  })
  .encode('x', '品牌')
  .encode('y', '上期收入')
  .encode('color', '产品')
  .encode('series', '产品');

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

ok，谢谢

posted by Calmio-Y 10 months ago

6303能答疑一下下吗

posted by Calmio-Y 10 months ago

不对啊， image 期望是柱子的顺序和图例的顺序一致啊

posted by Calmio-Y 10 months ago

我再看一下，有点奇怪这个问题

posted by pearmini 10 months ago

先这样写：

chart
  .interval()
  .data(xx)
  .encode('x', '品牌')
  .encode('y', '上期收入')
  .encode('color', '产品')
  .encode('series', '产品');

chart.render();

这种和 dodgeX 应该是等价的，我进一步看问题在哪。

posted by pearmini 10 months ago

Fund this Issue

$0.00
Funded

Pull requests

Company
AboutMission
Community
SpectrumEmbed
Support
FAQTerms of usePrivacy policyCode of conductCredits
Connect
FacebookTwitter

© 2019 BoostIO, Inc.