Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

折线图有空数据时,图例点击失效,设置 connectNulls: true 也没用 #4235

Closed
xiekailian opened this issue Nov 2, 2022 · 0 comments

Comments

@xiekailian
Copy link

xiekailian commented Nov 2, 2022

当折线图有空数据,且图表关闭了动画,即设置 chart.animate(false),图例点击失效,设置 connectNulls: true 将空数据连起来也没用,我并不想把空数据剔除,这些空数据在我的场景也有意义。在官网复现了问题,代码如下:

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

const data = [
  { month: 'Jan', city: 'Tokyo', temperature: 7 },
  { month: 'Jan', city: 'London', temperature: 3.9 },
  { month: 'Feb', city: 'Tokyo', temperature: null },
  { month: 'Feb', city: 'London', temperature: 4.2 },
  { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
  { month: 'Mar', city: 'London', temperature: null },
  { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
  { month: 'Apr', city: 'London', temperature: 8.5 },
  { month: 'May', city: 'Tokyo', temperature: 18.4 },
  { month: 'May', city: 'London', temperature: 11.9 },
  { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
  { month: 'Jun', city: 'London', temperature: 15.2 },
  { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
  { month: 'Jul', city: 'London', temperature: 17 },
  { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
  { month: 'Aug', city: 'London', temperature: 16.6 },
  { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
  { month: 'Sep', city: 'London', temperature: 14.2 },
  { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
  { month: 'Oct', city: 'London', temperature: 10.3 },
  { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
  { month: 'Nov', city: 'London', temperature: 6.6 },
  { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
  { month: 'Dec', city: 'London', temperature: 4.8 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);
chart.scale({
  month: {
    range: [0, 1],
  },
  temperature: {
    nice: true,
  },
});

chart.tooltip({
  showCrosshairs: true,
  shared: true,
});

chart.axis('temperature', {
  label: {
    formatter: (val) => {
      return val + ' °C';
    },
  },
});

chart
  .line({ connectNulls: true })
  .position('month*temperature')
  .color('city')
  .shape('smooth');

chart
  .point()
  .position('month*temperature')
  .color('city')
  .shape('circle');

chart.animate(false);

chart.render();
@antvis antvis locked and limited conversation to collaborators May 10, 2023
@hustcc hustcc converted this issue into discussion #4991 May 10, 2023

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant