柱线组合图表时候色板顺序问题

[chen900112]

• G2 Version:4.0.3
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

尝试官方案例
https://antv-g2.gitee.io/zh/examples/line/basic#curved
如何让London成为柱展示，Tokyo是线 并且按照色板顺序显示颜色，legend操作正常，并且映射London，Tokyo的颜色
看到这个案例
https://antv-g2.gitee.io/zh/examples/other/other#double-axes
但并不是这个是双轴
能否提供一个思路

[simaQ]

就是要按照双轴图的思路绘制，如果你以 https://antv-g2.gitee.io/zh/examples/line/basic#curved 为例想要绘制你需要的图表，你需要将数据结构处理成双轴图的接口，需要将相同 x 字段的数据存储到一个对象内，然后使用 chart.interval() 和 chart.line() 绘制。

至于颜色按照正常的色板显示，这个需要你手动指定了 color(chart.getTheme().colors[0])

[chen900112]

@simaQ
图例筛选交互没触发
legend点击隐藏无法触发对应的线柱交互

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

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

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});
chart.legend({
  custom: true,
  items: [
    { value: 'temperature', name: 'waiting', marker: { symbol: 'square', style: { fill: chart.getTheme().colors10[0], r: 5 } }  },
    { value: 'temperature1', name: 'people' , marker: { symbol: 'square', style: { fill: chart.getTheme().colors10[1], r: 5 } }}
  ],
});
chart.data(data);
chart.scale({
  month: {
    range: [0, 1],
  },
  temperature: {
    nice: true,
  },temperature1: {
    nice: true,
  },
});

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



chart
  .interval()
  .position('month*temperature1')
    .color(chart.getTheme().colors10[0])
.adjust([
    {
      type: 'dodge',
      marginRatio: 0,
    },
  ]);
chart
  .line()
  .position('month*temperature')
	.color(chart.getTheme().colors10[1])
  .shape('smooth');


chart.render();

[chen900112]

@simaQ
我该如何触发自定义图例筛选交互？

[JonasJonny]

@simaQ
我该如何触发自定义图例筛选交互？

Is that even possible @simaQ, @hustcc, @zqLu?
I guess they always use chart.removeInteraction('legend-filter'); when custom: true.