The issue has been closed

多轴图折线图 tooltip item 展示不符合预期 #5672

pearmini posted onGitHub

版本：5.1.6

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

const data = [
  {
    Month: 'Jan',
    Evaporation: 2,

    Temperature: 2,
  },
  {
    Month: 'Feb',
    Evaporation: 4.9,

    Temperature: 2.2,
  },
  {
    Month: 'Mar',
    Evaporation: 7,

    Temperature: 3.3,
  },
   {
    Month: 'Jan',

    Precipitation: 2.6,
    Temperature: 2,
  },
  {
    Month: 'Feb',

    Precipitation: 5.9,
    Temperature: 2.2,
  },
  {
    Month: 'Mar',

    Precipitation: 9,
    Temperature: 3.3,
  },
];

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

chart.data(data);

chart
  .line()
  .encode('x', 'Month')
  .encode('y', 'Evaporation')
  .encode('color', '#EE6666')
  .encode('shape', 'smooth')
  .scale('y', { independent: true, domainMax: 30 })

chart
  .line()
  .encode('x', 'Month')
  .encode('y', 'Precipitation')
  .encode('color', '#91CC75')
  .scale('y', { independent: true })
  .axis('y', {
    position: 'right',
  });

chart.render();

也许和 scale 不同步有关系。

posted by pearmini over 1 year ago

这个是数据的原因，如下使用双轴图才行：

export function mockLineSeries(): G2Spec {
  return {
    type: 'view',
    data: [ // 三条数据即可
      { Month: 'Jan', Evaporation: 2, Temperature: 2, Precipitation: 2.6 },
      { Month: 'Feb', Evaporation: 4.9, Temperature: 2.2, Precipitation: 5.9 },
      { Month: 'Mar', Evaporation: 7, Temperature: 3.3, Precipitation: 9 },
    ],
    children: [
      {
        type: 'line',
        encode: {
          x: 'Month',
          y: 'Evaporation',
          color: '#EE6666',
          shape: 'smooth',
        },
        scale: { y: { independent: true, domainMax: 30 } },
      },
      {
        type: 'line',
        encode: { x: 'Month', y: 'Precipitation', color: '#91CC75' },
        scale: { y: { independent: true } },
        axis: { y: { position: 'right' } },
      },
    ],
  };
}

posted by pearmini over 1 year ago

数据不统一啊，如果线图只能用这种数据，柱形图用的另一种数据，那我怎么做到线柱同时存在

posted by 18211365467 over 1 year ago

Fund this Issue

$0.00

Funded

Pull requests

多轴图折线图 tooltip item 展示不符合预期 #5672

Company

Community

Support

Connect