如何对线图数据指定字段进行排序

对于下面这个折线图,时间排序只能在外部排吗?

解决方案

VChart数据配置的时候可以根据字段进行排序,字段类型分为离散类型和连续类型,需要根据字段类型配置排序以及排序顺序

代码示例

yaml 复制代码
const spec = {
  type: 'line',
  data: {
    values: [
      { date: '2023-01-01', type: 'Product A', value: 99.9 },
      { date: '2023-01-02', type: 'Product C', value: 93.4 },
      { date: '2023-01-01', type: 'Product B', value: 96.6 },
      { date: '2023-01-02', type: 'Product A', value: 96.7 },
      { date: '2023-01-02', type: 'Product B', value: 91.1 },
      { date: '2023-01-03', type: 'Product A', value: 100.2 },
      { date: '2023-01-03', type: 'Product B', value: 99.4 },
      { date: '2023-01-03', type: 'Product C', value: 91.7 },
      { date: '2023-01-04', type: 'Product A', value: 104.7 },
      { date: '2023-01-05', type: 'Product B', value: 96 },
      { date: '2023-01-05', type: 'Product C', value: 92.3 },
      { date: '2023-01-06', type: 'Product A', value: 95.6 },
      { date: '2023-01-06', type: 'Product B', value: 89.1 },
      { date: '2023-01-09', type: 'Product B', value: 100.6},
      { date: '2023-01-09', type: 'Product C', value: 103.8},
      { date: '2023-01-04', type: 'Product C', value: 93.1 },
      { date: '2023-01-04', type: 'Product B', value: 108.1 },
      { date: '2023-01-07', type: 'Product A', value: 95.3 },
      { date: '2023-01-07', type: 'Product B', value: 89.2 },
      { date: '2023-01-07', type: 'Product C', value: 95.7 },
      { date: '2023-01-08', type: 'Product A', value: 96.1 },
      { date: '2023-01-08', type: 'Product B', value: 97.6 },
      { date: '2023-01-09', type: 'Product A', value: 96.1 },
      { date: '2023-01-10', type: 'Product A', value: 101.6 },
      { date: '2023-01-10', type: 'Product B', value: 108.3 },
      { date: '2023-01-10', type: 'Product C', value: 108.9 }
    ],
    fields: {
      date: {
        type: 'ordinal', // 数据维度 date 的类型是离散类型
        sortIndex: 1 // 数据会按照 date 进行排序
      },
    }
  },
  xField: 'date',
  yField: 'value',
  seriesField: 'type',
  point: {
    visible: false
  },
  line: {
    style: {
      lineWidth: 2
    }
  },
  legends: { visible: true },
  axes: [
    {
      orient: 'bottom',
      // paddingInner: 1,
      // paddingOuter: 0,
      trimPadding: true
    }
  ]
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

结果展示

相关推荐
码界筑梦坊1 天前
114-基于Python的1688电脑硬件数据可视化分析系统
开发语言·python·信息可视化·数据分析·毕业设计·echarts·数据可视化
余丁,微生信2 天前
在线绘制Nature Genetics同款带背景的GO富集条形图
数据可视化·论文插图·生信分析·科研绘图·富集分析·科学科普·nature genetics
余丁,微生信2 天前
聚类和流向:在线绘制热图+桑基图组合图展示基因表达和所属通路
数据可视化·生信分析·科研绘图·热图·桑基图·科学科普·基因表达
泽_浪里白条3 天前
我在 Superset 6.x 做自定义图表 + Embedded SDK 集成的实战复盘(附踩坑清单)
前端·数据可视化
山海鲸实战案例分享3 天前
【数字孪生实战案例】如何配置下拉菜单,实现与电子地图飞线的数据联动查询?~山海鲸可视化
数字孪生·数据可视化·零代码·实战案例·山海鲸可视化·电子地图·数据联动
无心使然3 天前
Openlayers调用ArcGis要素服务之一 ——要素查询 (/query)
前端·javascript·数据可视化
无心使然云中漫步3 天前
Openlayers调用ArcGis地图服务之五 —— 要素识别(/identify)
前端·arcgis·vue·数据可视化
无心使然4 天前
Openlayers调用ArcGis影像服务之一动态地图、地图切片(/exportImage)
前端·javascript·数据可视化
SL-staff4 天前
中小企业 BI 选型:帆软、Power BI、JVS-BI 性价比与架构对比
数据分析·数据可视化·powerbi·帆软·bi工具·部署架构·jvs-bi
山海鲸实战案例分享4 天前
【数字孪生实战案例】怎样开启三维场景,实现场景内所有模型自动转动?~山海鲸可视化
数字孪生·数据可视化·零代码·实战案例·山海鲸可视化·三维场景·自动旋转