VisActor / VTable

VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.
https://visactor.io/vtable
MIT License
1.72k stars 148 forks source link

透视表的数据格式按类似普通表的格式传入,可以正常显示,但是无法使用排序功能 #2278

Closed blngblng closed 1 month ago

blngblng commented 2 months ago

因为部分业务场景需要自己另外实现筛选,为了数据格式好处理,我是按下面这样子来设置透视表的数据格式的,想问一下这种格式的数据,是不是透视表的排序就不支持了,点击排序的时候是有时可以有时失效,而且倒序和顺序的时候没有高亮小三角。

  let tableInstance;
  console.log(data)
  const data = [
    {row1:'2024-08-01', row2:'周六', Quantity1:'1', Sales1:'4', Quantity2:'2', Sales2:'2'},
    {row1:'2024-08-03', row2:'周四', Quantity1:'2', Sales1:'3', Quantity2:'2', Sales2:'2'},
    {row1:'2024-08-07', row2:'周三', Quantity1:'3', Sales1:'2', Quantity2:'2', Sales2:'2'},
    {row1:'2024-08-09', row2:'周二', Quantity1:'4', Sales1:'1', Quantity2:'2', Sales2:'2'},
  ]
  const option = {
    records: data,
    rows: [
      {
        dimensionKey: 'row1',
        title: '日期',
        sort: true,
        headerStyle: {
          textStick: true
        },
        width: 'auto'
      },
      {
        dimensionKey: 'row2',
        title: '星期',
        sort: true,
        headerStyle: {
          textStick: true
        },
        width: 'auto'
      }
    ],
    columns: [
      {
        dimensionKey: 'data',
        title: '销售情况',
        headerStyle: {
          textStick: true
        },
        width: 'auto'
      },
    ],
    columnTree: [
      {
        dimensionKey: 'data',
        value: '商品1',
        virtual: true,
        children:[
          {indicatorKey: 'Quantity1',},
          {indicatorKey: 'Sales1',},
        ],
        width: 'auto'
      },
      {
        dimensionKey: 'data',
        value: '商品2',
        virtual: true,
        children:[
          {indicatorKey: 'Quantity2',},
          {indicatorKey: 'Sales2',},
        ],
        width: 'auto'
      },
    ],
    indicators: [
      {
        indicatorKey: 'Quantity1',
        title: 'Quantity1',
        width: 'auto',
        // showSort: false,
        headerStyle: {
          fontWeight: 'normal'
        },
      },
      {
        indicatorKey: 'Sales1',
        title: 'Sales1',
        width: 'auto',
        // showSort: false,
        headerStyle: {
          fontWeight: 'normal'
        },
        format: rec => {
          return '$' + Number(rec).toFixed(2);
        },
      },
      {
        indicatorKey: 'Quantity2',
        title: 'Quantity2',
        width: 'auto',
        // showSort: false,
        headerStyle: {
          fontWeight: 'normal'
        },
      },
      {
        indicatorKey: 'Sales2',
        title: 'Sales2',
        width: 'auto',
        // showSort: false,
        headerStyle: {
          fontWeight: 'normal'
        },
        format: rec => {
          return '$' + Number(rec).toFixed(2);
        },
      },
    ],
    corner: {
      titleOnDimension: 'all',
      headerStyle: {
        textStick: true
      }
    },
    dataConfig: {
    },
    widthMode: 'standard'
  };
  tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID), option);
  window['tableInstance'] = tableInstance;

image

blngblng commented 1 month ago

@fangsmile 请问这种格式下的指标是不是不允许排序,在上面的例子基础下,我给indicators设置了sort: true后,显示排序图标,但是点击之后没有任何效果(包括排序图标的高亮),也没有报错,能触发click_cell事件和pivot_sort_click事件。又将showSort: true试了一下,但是pivot_sort_click每次返回的都是同样的值,尝试使用updatePivotSortState去修改透视表相关字段的排序图标状态也没反应。