VisActor / VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
https://www.visactor.io/vchart
MIT License
920 stars 62 forks source link

[Feature] 组合图如何优雅的调各个图形的展示层级? #2713

Closed webiamcome closed 4 months ago

webiamcome commented 4 months ago

What problem does this feature solve?

当组合图有柱形图和折线图时,如果柱形图的数据在折线图前面,柱形图的层级就会在折线图上层,会遮挡折线图,影响视觉效果。只能通过调整series数组的先后顺序来调整图形层级。请问有没有可以调整组合图层级的api? image

代码复制至官网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;

What does the proposed API look like?

none

xiaoluoHe commented 4 months ago

目前没有,暂时只能通过 series 数组顺序调整。

webiamcome commented 4 months ago

目前没有,暂时只能通过 series 数组顺序调整。

好的,通过 series 排序解决了