如何实现折线图和堆积条形图的组合？

Question

类似于（https://www.visactor.io/vchart/demo/combination/single-region?keyword=commonChart）的组合图表可以实现条形图的堆叠效果吗？

我在网上找到了类似的演示：https://www.visactor.io/vchart/demo/combination/single-region?keyword=commonChart

但我不知道如何切换到堆积条形图。我有两种用法：

• 堆积图和折线图轴不同，如何实现图表？
• 如何实现堆积图和折线图同轴的图表？

谢谢你的回答

Answer 1

** 解决方案**

不同图表库的解决方案是不同的。根据您提供的演示，为 VChart

的组合图表中的条形系列设置 stack: true

** 代码示例**

const spec = { type: 'common', seriesField: 'color', data: [
    { id: 'id0', values: [
        { x: '周一', type: '早餐', y: 15
        },
        { x: '周一', type: '午餐', y: 25
        },
        { x: '周二', type: '早餐', y: 12
        },
        { x: '周二', type: '午餐', y: 30
        },
        { x: '周三', type: '早餐', y: 15
        },
        { x: '周三', type: '午餐', y: 24
        },
        { x: '周四', type: '早餐', y: 10
        },
        { x: '周四', type: '午餐', y: 25
        },
        { x: '周五', type: '早餐', y: 13
        },
        { x: '周五', type: '午餐', y: 20
        },
        { x: '周六', type: '早餐', y: 10
        },
        { x: '周六', type: '午餐', y: 22
        },
        { x: '周日', type: '早餐', y: 12
        },
        { x: '周日', type: '午餐', y: 19
        }
      ]
    },
    { id: 'id1', values: [
        { x: '周一', type: '饮料', y: 22
        },
        { x: '周二', type: '饮料', y: 43
        },
        { x: '周三', type: '饮料', y: 33
        },
        { x: '周四', type: '饮料', y: 22
        },
        { x: '周五', type: '饮料', y: 10
        },
        { x: '周六', type: '饮料', y: 30
        },
        { x: '周日', type: '饮料', y: 50
        }
      ]
    }
  ], series: [
    { type: 'bar', id: 'bar', dataIndex: 0, label: { visible: true
      }, seriesField: 'type', dataIndex: 0, xField: 'x', yField: 'y', stack: true
    },
    { type: 'line', id: 'line', dataIndex: 1, label: { visible: true
      }, seriesField: 'type', xField: 'x', yField: 'y', stack: false
    }
  ], axes: [
    { id: "leftYAxis", orient: "left", seriesIndex: [
        0,
        1
      ], nice: true
    },
    { id: "rightYAxis", orient: "right", seriesIndex: [
        0,
        1
      ], gird: { visible: false
      }
    },
    { orient: 'bottom', label: { visible: true
      }, type: 'band'
    }
  ], legends: { visible: true, orient: 'bottom'
  }
}; 

** 结果**

在线演示： https://codesandbox.io/s/stack-bar-chart-and-line-cz9xvj

** 相关文档**

常用图表教程： https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Types/Area 常用图表选项： https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Types/Area 同步轴选项： https://www.visactor.io/vchart/option/commonChart#axes-linear.sync.axisId github：https://github.com/VisActor/VChart