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

[Calmio-Y]

问题描述

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]

屏幕截图或视频（可选）

补充说明（可选）

No response

[pearmini]

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

[Calmio-Y]

有demo吗

[pearmini]

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();

[Calmio-Y]

ok，谢谢

[Calmio-Y]

6303能答疑一下下吗

[Calmio-Y]

不对啊，

期望是柱子的顺序和图例的顺序一致啊

[pearmini]

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

[pearmini]

先这样写：

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

chart.render();

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