Closed webiamcome closed 4 months ago
当组合图有柱形图和折线图时,如果柱形图的数据在折线图前面,柱形图的层级就会在折线图上层,会遮挡折线图,影响视觉效果。只能通过调整series数组的先后顺序来调整图形层级。请问有没有可以调整组合图层级的api?
代码复制至官网demo可复现: https://www.visactor.io/vchart/demo/interaction/element-active?keyword=commonChart
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: 'line', id: 'line', dataIndex: 1, label: { visible: true, syncState: true }, seriesField: 'type', xField: 'x', yField: 'y', stack: false, line: { state: { active: { lineWidth: 4 } } }, interactions: [ { type: 'element-active' } ] }, { type: 'bar', id: 'bar', dataIndex: 0, label: { visible: true, syncState: true }, seriesField: 'type', dataIndex: 0, xField: ['x', 'type'], yField: 'y', bar: { state: { active: { stroke: '#000', lineWidth: 2 } }, }, interactions: [ { type: 'element-active' } ] }, ], axes: [ { orient: 'left', seriesId: ['line'], }, { orient: 'right', seriesId: ['bar'], grid: { visible: false } }, { orient: 'bottom', label: { visible: true }, type: 'band' } ], legends: { visible: true, orient: 'bottom' } }; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); // Just for the convenience of console debugging, DO NOT COPY! window['vchart'] = vchart;
none
目前没有,暂时只能通过 series 数组顺序调整。
好的,通过 series 排序解决了
What problem does this feature solve?
当组合图有柱形图和折线图时,如果柱形图的数据在折线图前面,柱形图的层级就会在折线图上层,会遮挡折线图,影响视觉效果。只能通过调整series数组的先后顺序来调整图形层级。请问有没有可以调整组合图层级的api?
代码复制至官网demo可复现: https://www.visactor.io/vchart/demo/interaction/element-active?keyword=commonChart
What does the proposed API look like?
none