图表数据转化

目标：

现在前端所需的图标数据格式大致统一，后端从数据库查询后的数据种类多种多样，希望可以通过常见的转化方法转为工具类，提高业务开发效率。

常见的数据表格式说明

下面是常见前端框架（Vue、React）中使用的图表数据格式的总结：

Vue

Vue Chart.js

• Line Chart:

  • 数据格式：
    • labels：标签数组，表示 x 轴上的数据点。
    • datasets：数据集数组，每个数据集包含以下属性：
      • label：数据集的标签。
      • data：数据点数组，表示 y 轴上的数据。
      • borderColor：线条颜色。
      • fill：是否填充面积。
  • 示例代码：

  data() {
    return {
      chartData: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'Data 1',
            data: [65, 59, 80, 81, 56, 55, 40],
            borderColor: 'red',
            fill: false
          },
          {
            label: 'Data 2',
            data: [28, 48, 40, 19, 86, 27, 90],
            borderColor: 'blue',
            fill: false
          }
        ]
      }
    }
  }
  

• Bar Chart:

  • 数据格式：
    • labels：标签数组，表示 x 轴上的数据点。
    • datasets：数据集数组，每个数据集包含以下属性：
      • label：数据集的标签。
      • data：数据点数组，表示 y 轴上的数据。
      • backgroundColor：柱状图的填充颜色。
  • 示例代码：

  data() {
    return {
      chartData: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
          {
            label: 'Data 1',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'red'
          },
          {
            label: 'Data 2',
            data: [15, 9, 7, 8, 5, 7],
            backgroundColor: 'blue'
          }
        ]
      }
    }
  }
  

Vue ECharts

• Line Chart:

  • 数据格式：
    • xAxis：x 轴配置，包含以下属性：
      • type：x 轴类型（例如 category）。
      • data：标签数组，表示 x 轴上的数据点。
    • yAxis：y 轴配置，包含以下属性：
      • type：y 轴类型。
    • series：系列数组，每个系列包含以下属性：
      • name：系列的名称。
      • type：图表类型（例如 line）。
      • data：数据点数组，表示 y 轴上的数据。
  • 示例代码：

  data() {
    return {
      chartData: {
        xAxis: {
          type: 'category',
          data: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Data 1',
            type: 'line',
            data: [65, 59, 80, 81, 56, 55, 40]
          },
          {
            name: 'Data 2',
            type: 'line',
            data: [28, 48, 40, 19, 86, 27, 90]
          }
        ]
      }
    }
  }
  

• Bar Chart:

  • 数据格式：
    • xAxis：x 轴配置，包含以下属性：
      • type：x 轴类型（例如 category）。
      • data：标签数组，表示 x 轴上的数据点。
    • yAxis：y 轴配置，包含以下属性：
      • type：y 轴类型。
    • series：系列数组，每个系列包含以下属性：
      • name：系列的名称。
      • type：图表类型（例如 bar）。
      • data：数据点数组，表示 y 轴上的数据。
  • 示例代码：

  data() {
    return {
      chartData: {
        xAxis: {
          type: 'category',
          data: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Data 1',
            type: 'bar',
            data: [12, 19, 3, 5, 2, 3]
          },
          {
            name: 'Data 2',
            type: 'bar',
            data: [15, 9, 7, 8, 5, 7]
          }
        ]
      }
    }
  }
  

React

React Chart.js

• Line Chart:
  • 数据格式与 Vue Chart.js 中的相同。
• Bar Chart:
  • 数据格式与 Vue Chart.js 中的相同。

React ECharts

• Line Chart:
  • 数据格式与 Vue ECharts 中的相同。
• Bar Chart:
  • 数据格式与 Vue ECharts 中的相同。

后端统一返回数据格式

Json展示

{
    "code": 200,
    "message": "成功",
    "data": {
        "x": [
            "January",
            "February",
            "March"
        ],
        "y": [
            {
                "name": "Data 1",
                "data": [
                    "77.34",
                    "72.65",
                    "74.18"
                ]
            },
            {
                "name": "Data 2",
                "data": [
                    "70.67",
                    "79.54",
                    "74.75"
                ]
            },
            {
                "name": "Data 3",
                "data": [
                    "74.66",
                    "75.39",
                    "74.12"
                ]
            }
        ]
    }
}

实体类封装：

x轴，y轴分组：

import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

@Data
@NoArgsConstructor
public class TableListVo {

    @ApiModelProperty(value = "x轴数据")
    private List<String> x;

    @ApiModelProperty(value = "y轴数据")
    private List<TableYListVo> y;

    public TableListVo(List<String> x, List<TableYListVo> y) {
        this.x = x;
        this.y = y;
    }


}

y轴数据：

import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

@Data
@NoArgsConstructor
public class TableYListVo {


    @ApiModelProperty(value = "名称")
    private String name;

    @ApiModelProperty(value = "数据")
    private List<String> data;

    public TableYListVo(String name, List<String> data) {
        this.name = name;
        this.data = data;
    }
}

抽取常见的转化方式

1.根据查询的数据作为分组展示依据

数据库查询出的数据：

<==    Columns: average, variety, city
<==        Row: 70.67, apple, New York
<==        Row: 74.75, apple, Los Angeles"
<==        Row: 77.34, banana, New York
<==        Row: 74.18, banana, Los Angeles"
<==        Row: 72.65, banana, Chicago
<==        Row: 74.12, orange, Los Angeles"
<==        Row: 75.39, orange, Chicago
<==        Row: 79.54, apple, Chicago
<==        Row: 74.66, orange, New York

需求：现在希望将city作为x轴数据，variety作为y轴的name数据，average为y轴的data属性。达到的效果为，每个城市对应的品种数据以表格的形式展出，若average则赋值为0

效果图：

转化工具类：

 /**
     * 将数据列表转换为表格数据，可以排除指定的 x 字段和 y 字段
     *
     * @param dataList            数据列表
     * @param xFieldExtractor     x 字段值提取函数
     * @param yFieldExtractor     y 字段值提取函数
     * @param valueFieldExtractor 值字段值提取函数
     * @param excludedXFields     要排除的 x 字段值列表
     * @param excludedYFields     要排除的 y 字段值列表
     * @param fieldLabelProvider  字段标签提供函数
     * @param <T>                 数据类型
     * @return 表格数据对象
     */
    public static <T> TableListVo convertToTableDataWithExclusions(List<T> dataList, Function<T, String> xFieldExtractor, Function<T, String> yFieldExtractor, Function<T, String> valueFieldExtractor, List<String> excludedXFields, List<String> excludedYFields, Function<String, String> fieldLabelProvider) {
        try {
            // 创建一个数据映射的嵌套数据结构，用于存储每个字段的数据
            Map<String, Map<String, List<String>>> dataMap = dataList.stream().filter(obj -> excludedXFields == null || !excludedXFields.contains(xFieldExtractor.apply(obj))).collect(Collectors.groupingBy(obj -> xFieldExtractor.apply(obj), Collectors.groupingBy(obj -> yFieldExtractor.apply(obj), Collectors.mapping(obj -> String.valueOf(valueFieldExtractor.apply(obj)), Collectors.toList()))));

            // 提取 x 轴的标签，即 xField 的值列表
            List<String> xLabels = new ArrayList<>(dataMap.keySet());

            // 获取所有可能的 y 字段值
            List<String> allYValues = dataMap.values().stream().flatMap(yData -> yData.keySet().stream()).filter(yValue -> excludedYFields == null || !excludedYFields.contains(yValue)).distinct().collect(Collectors.toList());

            // 构建 y 轴的数据列表
            List<TableYListVo> yData = allYValues.stream().map(yValue -> {
                String mappedYValue = fieldLabelProvider != null ? fieldLabelProvider.apply(yValue) : yValue;
                List<String> yValueData = xLabels.stream().map(xLabel -> dataMap.getOrDefault(xLabel, new HashMap<>()).getOrDefault(yValue, new ArrayList<>())).flatMap(List::stream).collect(Collectors.toList());
                return new TableYListVo(mappedYValue, yValueData);
            }).collect(Collectors.toList());

            return new TableListVo(xLabels, yData);
        } catch (Exception e) {
            // 异常处理，记录日志等
            e.printStackTrace();
            return new TableListVo(new ArrayList<>(), new ArrayList<>());
        }
    }

调用：

List<TobaccoSensoryDto> resultList = tobaccoInfoMapper.selectBySensory();
        TableListVo tableListVo1 = TableUtils.convertToTableDataWithExclusions(resultList,TobaccoSensoryDto::getCity , TobaccoSensoryDto::getVariety, TobaccoSensoryDto::getAverage,
                null,CollectionUtil.newArrayList("红大","政和红大"),null);

2.根据查询的字段作为分组展示依据

数据库查询出的数据：

<==    Columns: aroma_quality, aroma_amount, impurity, mellowness, concentration, strength, irritation, aftertaste, create_year
<==        Row: 6.95, 7.18, 6.77, 6.86, 7.59, 7.23, 6.82, 6.77, 2013
<==        Row: 6.88, 7.42, 6.85, 6.88, 7.73, 6.77, 6.62, 6.73, 2014
<==        Row: 7.42, 7.65, 7.27, 7.27, 7.81, 7.35, 7.27, 7.23, 2015
<==        Row: 7.5, 7.5, 7.38, 7.46, 7.85, 7.69, 7.27, 7.38, 2016
<==        Row: 7.81, 7.92, 7.5, 7.88, 8.04, 7.81, 7.69, 7.69, 2017
<==        Row: 7.5, 7.8, 7.33, 7.3, 8.23, 7.77, 7.2, 7.27, 2018
<==        Row: 7.96, 8.11, 7.79, 7.75, 8.09, 7.96, 7.75, 7.71, 2019
<==        Row: 7.54, 7.58, 7.08, 7.33, 7.42, 7.33, 7.33, 7.08, 2020
<==        Row: 7.25, 7.83, 7.08, 7.21, 8.04, 7.38, 7.25, 7.17, 2021

需求：现在希望将create_year作为x轴数据，查询字段作为作为y轴的name数据，查询的字段值为y轴的data属性。达到的效果为，每年对应的9字段数据以表格的形式展出，若average则赋值为0

效果图：

转化工具类：

/**
     * 将数据列表转换为表格数据
     *
     * @param dataList           数据列表
     * @param xFieldExtractor    提取 x 字段值的函数
     * @param yFields            y 字段的列表
     * @param fieldLabelProvider 获取字段标签值的函数
     * @param <T>                数据类型
     * @return 表格数据对象
     */
    public static <T> TableListVo convertToTableData(List<T> dataList, Function<T, String> xFieldExtractor, List<String> yFields, Function<String, String> fieldLabelProvider) {
        try {
            // 创建一个数据映射的嵌套数据结构，用于存储每个字段的数据
            Map<String, Map<String, List<String>>> dataMap = new HashMap<>();

            // 初始化数据映射结构，为每个字段创建一个子映射
            yFields.forEach(yField -> dataMap.put(yField, new HashMap<>()));

            // 遍历数据列表，将数据按字段存储到数据映射中
            dataList.forEach(data -> {
                String xValue = xFieldExtractor.apply(data);

                yFields.forEach(yField -> {
                    String yValue = getField(data, yField);

                    // 将数据根据 x 值和对应的字段存储到数据映射中
                    if (yValue == null) {
                        yValue = "0"; // 将 null 值替换为 "0"
                    }
                    dataMap.get(yField).computeIfAbsent(xValue, k -> new ArrayList<>()).add(yValue);
                });
            });

            // 提取 x 轴的标签，即 xFieldExtractor 获得的值列表
            List<String> xLabels = new ArrayList<>(dataMap.get(yFields.get(0)).keySet());

            // 判断 x 字段的数据类型，并根据需要进行排序
            if (isNumeric(xLabels.get(0))) {
                xLabels.sort(Comparator.comparingDouble(Double::parseDouble));
            }

            // 构建 y 轴的数据列表
            List<TableYListVo> yData = yFields.stream().map(yField -> {
                String fieldLabel = fieldLabelProvider.apply(yField);

                // 提取每个字段对应的数据值
                List<String> yValueData = dataMap.get(yField).values().stream().flatMap(List::stream).collect(Collectors.toList());

                return new TableYListVo(fieldLabel, yValueData);
            }).collect(Collectors.toList());

            return new TableListVo(xLabels, yData);
        } catch (Exception e) {
            // 异常处理，记录日志等
            e.printStackTrace();
            return new TableListVo(new ArrayList<>(), new ArrayList<>());
        }
    }

    // 判断字符串是否为数字
    private static boolean isNumeric(String str) {
        if (str == null) {
            return false;
        }
        try {
            Double.parseDouble(str);
            return true;
        } catch (NumberFormatException e) {
            return false;
        }
    }

    /**
     * 获取对象的字段值
     *
     * @param data      数据对象
     * @param fieldName 字段名
     * @param <T>       数据类型
     * @return 字段值
     */
    private static <T> String getField(T data, String fieldName) {
        if (data == null || fieldName == null || fieldName.isEmpty()) {
            return null;
        }

        Class<?> clazz = data.getClass();

        try {
            Field field = clazz.getDeclaredField(fieldName);
            field.setAccessible(true);
            return field.get(data).toString();
        } catch (NoSuchFieldException | IllegalAccessException e) {
            e.printStackTrace();
        }

        return null;
    }

调用：

 List<TobaccoSensoryEval> resultList = tobaccoChemicalEvalMapper.getHistorySensory(gradekey.getGrade());
            TableListVo tableListVo = TableUtils.convertToTableData(resultList, TobaccoSensoryEval::getCreateYear, CollectionUtil.newArrayList("aromaQuality", "aromaAmount"), TobaccoSensoryEvalField::getByFieldName);
            System.out.println("tableListVo = " + tableListVo);

本栏目推荐文章
• Jmeter 如何连接mysql数据库？
• SQL Server 检测是不是数字型数据的两种方法
• 如何通过Navicat把MySQL远程数据库导入到本地数据库
• 和利时MACS6通过dat文件实现任意时间范围与测点的历史数据提取与科研分析
• 深入理解spring框架：剖析多线程模式下数据库连接
• 数据可视化是如何帮助大型企业提高效率的？
• redis 数据库
• openpyxl模块--------------------------------重复数据
• Django客户端应用1向服务端应用2发送POST请求并接收解析数据
• 数据可视化是如何帮助我们高效了解数据的？

图表 数据图表echarts数据 图表highcharts数据 图表 人口 力量 数据 图表javascript数据 视图 图表 实时 数据 图表 差异 数据 数据分析 图表matplotlib数据 数据 图表 图形 图表javascript函数 数据 数据 图表 类型 数据库