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

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

解决方案

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;

结果展示

相关推荐
CodeCraft Studio2 天前
空间天气监测,TeeChart助力实现太阳活动数据的可视化分析
信息可视化·数据挖掘·数据分析·数据可视化·teechart·科研图表·图表库
FIT2CLOUD飞致云3 天前
安全漏洞修复,API数据源支持添加时间戳参数,DataEase开源BI工具v2.10.17 LTS版本发布
开源·数据可视化·dataease·bi·数据大屏
图扑可视化4 天前
图扑 HT 智慧汽车展示平台全自研技术方案
汽车·数据可视化·组态监控·汽车展示
Highcharts.js5 天前
Highcharts开发解析:从数据可视化到用户体验的全面指南
信息可视化·前端框架·数据可视化·ux·highcharts·交互图表
数字冰雹5 天前
为城市治理装上“数字引擎”
中间件·数据可视化
Highcharts.js6 天前
学习 Highcharts 可视化开发的有效途径
学习·数据可视化·highcharts·图表开发·可视化开发
易知微EasyV数据可视化6 天前
数字孪生文旅:以某地智慧乡村数字孪生驾驶舱建设为例
经验分享·数字孪生·数据可视化·智慧文旅
做cv的小昊8 天前
科研论文PPT绘图技巧:绘制任意曲线三角形(胖三角形)并制作效果对比图
经验分享·笔记·学习·微软·ai绘画·数据可视化
大数据魔法师10 天前
Seaborn(一) - Seaborn绘图方法介绍
matplotlib·数据可视化
一晌小贪欢13 天前
【Python数据分析】数据分析与可视化
开发语言·python·数据分析·数据可视化·数据清洗