G2
G2 copied to clipboard
antvis
[Bug]: 线柱混合时，如果数据为null，图表未渲染对应的标记
Describe the bug / 问题描述
import { Chart } from "@antv/g2";
const chart = new Chart({ container: "container" });
const data = [
{ 月份: "Jan.", London: 18.9, Berlin: 12.4, Berlin1: 12, Berlin2: null },
{ 月份: "Feb.", London: 28.8, Berlin: 23.2, Berlin1: 24, Berlin2: null },
{ 月份: "Mar.", London: 39.3, Berlin: 81.4, Berlin1: 36, Berlin2: null },
{ 月份: "Apr.", London: 81.4, Berlin: 47, Berlin1: 48, Berlin2: null },
{ 月份: "May", London: 47, Berlin: 20.3, Berlin1: 36, Berlin2: null },
{ 月份: "Jun.", London: 20.3, Berlin: 18.9, Berlin1: 12, Berlin2: null },
];
chart.options({
type: "view",
autoFit: true,
data: data,
// scale: {
// color: {
// independent: true,
// }
// },
children: [
{
type: "interval",
data: {
type: "inline",
transform: [
{
type: "fold",
fields: ["London", "Berlin"],
key: "leftYIds",
value: "leftYValue",
},
],
},
encode: {
x: "月份",
y: "leftYValue",
color: "leftYIds",
// series: "leftYIds",
},
transform: [{
type: 'dodgeX'
}],
interaction: { elementHighlight: { background: true } },
},
{
type: "line",
data: {
type: "inline",
transform: [
{
type: "fold",
fields: ["Berlin1", "Berlin2"],
key: "leftYIds",
value: "leftYValue",
},
],
},
encode: {
x: "月份",
y: "leftYValue",
color: "leftYIds",
series: "leftYIds",
},
interaction: { elementHighlight: { background: true } },
}
],
});
chart.render();
实际：
期望：
Reproduction link / 复现链接
No response
Steps to Reproduce the Bug or Issue / 重现步骤
No response
Version / 版本
🆕 5.x
OS / 操作系统
- [x] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他
Browser / 浏览器
- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他
应该是 interval 的 dodgeX 导致 line 也有了这个 transform。
transform: [{
type: 'dodgeX'
}],
多轴图下，可以先避免用 transform https://github.com/antvis/G2/issues/6657
import { Chart } from '@antv/g2';
const chart = new Chart({ container: 'container' });
const data = [
{ 月份: 'Jan.', London: 18.9, Berlin: 12.4, Berlin1: 12, Berlin2: null },
{ 月份: 'Feb.', London: 28.8, Berlin: 23.2, Berlin1: 24, Berlin2: null },
{ 月份: 'Mar.', London: 39.3, Berlin: 81.4, Berlin1: 36, Berlin2: null },
{ 月份: 'Apr.', London: 81.4, Berlin: 47, Berlin1: 48, Berlin2: null },
{ 月份: 'May', London: 47, Berlin: 20.3, Berlin1: 36, Berlin2: null },
{ 月份: 'Jun.', London: 20.3, Berlin: 18.9, Berlin1: 12, Berlin2: null },
];
chart.options({
type: 'view',
autoFit: true,
data: data,
// scale: {
// color: {
// independent: true,
// }
// },
children: [
{
type: 'interval',
data: {
type: 'inline',
transform: [
{
type: 'fold',
fields: ['London', 'Berlin'],
key: 'leftYIds',
value: 'leftYValue',
},
],
},
encode: {
x: '月份',
y: 'leftYValue',
color: 'leftYIds',
series: 'leftYIds',
},
scale: {
series: {
key: 'right',
},
},
interaction: { elementHighlight: { background: true } },
},
{
type: 'line',
data: {
type: 'inline',
transform: [
{
type: 'fold',
fields: ['Berlin1', 'Berlin2'],
key: 'leftYIds',
value: 'leftYValue',
},
],
},
encode: {
x: '月份',
y: 'leftYValue',
color: 'leftYIds',
series: 'leftYIds',
},
interaction: { elementHighlight: { background: true } },
},
],
});
chart.render();
https://stackblitz.com/edit/react-chvm779o-lqa4wipj?file=src%2Findex.js
I have the same issue with simple multiple lines:
import React from 'react';
import ReactDOM from 'react-dom';
import { Line } from '@ant-design/plots';
const DemoLine = () => {
const config = {
"data": [
{
"value": 3.99,
"series": "Mystery",
"dateOfPublication": "2000-07-06"
},
{
"value": 2.99,
"series": "Fiction",
"dateOfPublication": "2000-09-23"
},
{
"value": 12.99,
"series": "Mystery",
"dateOfPublication": "2000-11-09"
},
{
"value": 12.99,
"series": "Mystery",
"dateOfPublication": "2001-05-14"
},
{
"value": 12.99,
"series": "Fiction",
"dateOfPublication": "2001-12-03"
},
{
"value": 4.69,
"series": "Romance",
"dateOfPublication": "2002-04-01"
},
{
"value": 7.89,
"series": "Mystery",
"dateOfPublication": "2003-01-12"
},
{
"value": 12.99,
"series": "Children",
"dateOfPublication": "2003-11-03"
},
{
"value": 4,
"series": "Fantasy",
"dateOfPublication": "2003-12-06"
},
{
"value": 4,
"series": "Fiction",
"dateOfPublication": "2003-12-06"
},
{
"value": 4,
"series": "Horror",
"dateOfPublication": "2003-12-06"
},
{
"value": 4,
"series": "Humor",
"dateOfPublication": "2003-12-06"
},
{
"value": 34.99,
"series": "Fiction",
"dateOfPublication": "2004-01-02"
},
{
"value": 23.6,
"series": "Science",
"dateOfPublication": "2004-05-03"
},
{
"value": 3,
"series": "Self Help",
"dateOfPublication": "2004-11-03"
},
{
"value": 15.39,
"series": "Biographies",
"dateOfPublication": "2005-02-07"
},
{
"value": 15.39,
"series": "History",
"dateOfPublication": "2005-02-07"
},
{
"value": 15.39,
"series": "Politics",
"dateOfPublication": "2005-02-07"
},
{
"value": 12.99,
"series": "Romance",
"dateOfPublication": "2005-03-01"
},
{
"value": 27.99,
"series": "Fantasy",
"dateOfPublication": "2005-05-05"
},
{
"value": 12.99,
"series": "Horror",
"dateOfPublication": "2006-04-01"
},
{
"value": 6.99,
"series": "Mystery",
"dateOfPublication": "2006-05-09"
},
{
"value": 12.99,
"series": "Horror",
"dateOfPublication": "2007-02-03"
},
{
"value": 45.69,
"series": "Fantasy",
"dateOfPublication": "2007-05-09"
},
{
"value": 0.99,
"series": "Historical",
"dateOfPublication": "2007-05-09"
},
{
"value": 0.99,
"series": "Novels",
"dateOfPublication": "2007-05-09"
},
{
"value": 12.99,
"series": "Romance",
"dateOfPublication": "2008-09-11"
},
{
"value": 4.5,
"series": "History",
"dateOfPublication": "2009-03-11"
},
{
"value": 12.99,
"series": "Mystery",
"dateOfPublication": "2009-04-18"
},
{
"value": 42.99,
"series": "Horror",
"dateOfPublication": "2009-12-04"
},
{
"value": 8.49,
"series": "Historical",
"dateOfPublication": "2010-02-01"
},
{
"value": 8.49,
"series": "Novels",
"dateOfPublication": "2010-02-01"
}
],
"height": 475,
"xField": "dateOfPublication",
"yField": "value",
"colorField": "series",
}
return <Line
{...config}
transform={[{type: 'dodgeX'}]}
/>;
};
ReactDOM.render(<DemoLine />, document.getElementById('container'));
Tooltip marker is purple but it should be blue
