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

Do you want to work on this issue?

You can request for a bounty in order to promote it!

[Bug]: 线柱混合时，如果数据为null，图表未渲染对应的标记 #6753

sanye-huang posted onGitHub

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

实际： Image 期望： Image

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他

应该是 interval 的 dodgeX 导致 line 也有了这个 transform。

transform: [{
  type: 'dodgeX'
}],
posted by hustcc 17 days ago

多轴图下，可以先避免用 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

posted by moayuisuda 17 days ago

多轴图下，可以先避免用 transform #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

这个会有其他问题，柱图的series会多出来线图的

posted by sanye-huang 17 days ago

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

Image

posted by giacomoronconiobda 16 days ago

I may I might a solution to your issue. Check it out here click

posted by slapes7 10 days ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests

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

© 2019 BoostIO, Inc.