征集【柱面 双轴图】贡献者

[NierWinter]

• G2Plot Version:lastest
• Platform:windows
• Mini Showcase(like screenshots):

• CodePen Link:

在给柱线混合图表的折线添加背景色的时候，展现的形状能不能像面积图一样，囊括下面的部分

[hustcc]

面积图加 line 辅助图形，折线图加 area 辅助图形。

[NierWinter]

面积图加 line 辅助图形，折线图加 area 辅助图形。

辅助图形该怎么加，能说一下是哪个api吗

[hustcc]

面积图加 line 辅助图形，折线图加 area 辅助图形。

辅助图形该怎么加，能说一下是哪个api吗

G2Plot 支持吧，这周完成。

[NierWinter]

面积图加 line 辅助图形，折线图加 area 辅助图形。

辅助图形该怎么加，能说一下是哪个api吗

G2Plot 支持吧，这周完成。

好的

[hustcc]

@NierWinter 你的需求是需要做到柱形图和面积图的双轴图吧啊?

[NierWinter]

@NierWinter 你的需求是需要做到柱形图和面积图的双轴图吧啊?

是的，柱形与叠堆面积图

[hustcc]

@liuzhenying 柱面双轴图可以做到吗？

[visiky]

短期内，不会提供这种图表，可以考虑使用 多 view 来实现，参考如下：欢迎来提供 demo 👏

import { MultiView } from '@antv/g2plot';

const data = [
  { time: '2019-03', value: 350, count: 800 },
  { time: '2019-04', value: 900, count: 600 },
  { time: '2019-05', value: 300, count: 400 },
  { time: '2019-06', value: 450, count: 380 },
  { time: '2019-07', value: 470, count: 220 },
];

    const rangeAreaPlot = new MultiView('container', {
      appendPadding: 8,
      syncViewPadding: true,
      tooltip: { shared: true, showMarkers: false, showCrosshairs: true, offsetY: -50 },
      views: [
        {
          data,
          axes: {},
          meta: {
            time: {
              type: 'time',
              mask: 'MM-DD',
              nice: true,
              tickInterval: 24 * 3600 * 1000 * 2,
              range: [0.05, 0.95],
            },
            value: {
              nice: true,
              sync: true,
              alias: '温度范围',
            },
          },
          // view1: prepare a area plot, mapping position to `time*temperature`
          geometries: [
            {
              type: 'area',
              xField: 'time',
              yField: 'value',
              mapping: {},
            },
          ],
        },
        {
          data,
          axes: false,
          meta: {
            time: {
              type: 'time',
              mask: 'MM-DD',
              nice: true,
              tickInterval: 24 * 3600 * 1000 * 2,
              range: [0.05, 0.95],
            },
            count: {
              sync: 'value',
              alias: '温度',
            },
          },
          // view2: prepare a line plot and point plot, mapping position to `time*temperature` (share data)
          geometries: [
            {
              type: 'interval',
              xField: 'time',
              yField: 'count',
              mapping: {},
            },
          ],
        },
      ],
    });

    // Step 3: 渲染图表
    rangeAreaPlot.render();

[NierWinter]

短期内，不会提供这种图表，可以考虑使用 多 view 来实现，参考如下：欢迎来提供 demo 👏

import { MultiView } from '@antv/g2plot';

const data = [
  { time: '2019-03', value: 350, count: 800 },
  { time: '2019-04', value: 900, count: 600 },
  { time: '2019-05', value: 300, count: 400 },
  { time: '2019-06', value: 450, count: 380 },
  { time: '2019-07', value: 470, count: 220 },
];

    const rangeAreaPlot = new MultiView('container', {
      appendPadding: 8,
      syncViewPadding: true,
      tooltip: { shared: true, showMarkers: false, showCrosshairs: true, offsetY: -50 },
      views: [
        {
          data,
          axes: {},
          meta: {
            time: {
              type: 'time',
              mask: 'MM-DD',
              nice: true,
              tickInterval: 24 * 3600 * 1000 * 2,
              range: [0.05, 0.95],
            },
            value: {
              nice: true,
              sync: true,
              alias: '温度范围',
            },
          },
          // view1: prepare a area plot, mapping position to `time*temperature`
          geometries: [
            {
              type: 'area',
              xField: 'time',
              yField: 'value',
              mapping: {},
            },
          ],
        },
        {
          data,
          axes: false,
          meta: {
            time: {
              type: 'time',
              mask: 'MM-DD',
              nice: true,
              tickInterval: 24 * 3600 * 1000 * 2,
              range: [0.05, 0.95],
            },
            count: {
              sync: 'value',
              alias: '温度',
            },
          },
          // view2: prepare a line plot and point plot, mapping position to `time*temperature` (share data)
          geometries: [
            {
              type: 'interval',
              xField: 'time',
              yField: 'count',
              mapping: {},
            },
          ],
        },
      ],
    });

    // Step 3: 渲染图表
    rangeAreaPlot.render();

我明白了，感谢指导！