创建能够查询REST接口并在图表中显示结果的微服务选项

44次阅读

问题描述

计划创建一个微服务，该微服务将从数据库中读取数据并在图表中显示。用户在选择适当的工具或框架之前，想了解是否有其他人已经创建过类似的服务，以及在开始之前需要考虑哪些事项。用户考虑了使用Django和Spring Boot，但也在考虑是否可以选择一些现成的解决方案，如Graphite，并在此基础上进行配置。

用户基本上在寻找一种工具，能够从REST接口读取数据，并在图表中显示结果。如果有的话，最好能够选择一个用Kotlin、Golang或Java编写的框架。

用户的目标是在图表中显示某个指标的增长速度，以及在某个特定时刻显示R2（即数据点的一致性）、斜率等信息。

在编写这个问题的同时，用户还想知道是否有可能使用数据科学的方法来预测未来某个时刻的增长情况。

此外，用户还提到了一个每天晚上运行的cron作业，该作业将数据插入到Postgres数据库中。数据库表的部分数据如下：

ID = 61
PACKAGE_NAME = FIREFOX
DATE = 2018-04-29
VERSION = 59.0.2

ID = 62
PACKAGE_NAME = TOMCAT8
DATE = 2018-04-29
VERSION = 8.0.51

ID = 63
PACKAGE_NAME = TOMCAT85
DATE = 2018-04-29
VERSION = 8.5.30

ID = 64
PACKAGE_NAME = TOMCAT9
DATE = 2018-04-29
VERSION = 9.0.7

ID = 65
PACKAGE_NAME = FIREFOX
DATE = 2018-04-30
VERSION = 59.0.2

ID = 66
PACKAGE_NAME = TOMCAT8
DATE = 2018-04-30
VERSION = 8.0.51

ID = 67
PACKAGE_NAME = TOMCAT85
DATE = 2018-04-30
VERSION = 8.5.30

ID = 68
PACKAGE_NAME = TOMCAT9
DATE = 2018-04-30
VERSION = 9.0.7

这些数据需要以类似Tiobe网站的图表形式进行显示。

解决方案

请注意以下操作可能涉及版本差异及配置过程。

使用Chart.js创建图表

一个合适的解决方案是使用Chart.js，这是一个用于创建各种类型图表的JavaScript库。它可以满足你的需求，从REST接口读取数据并将结果显示在图表中。以下是一些步骤来使用Chart.js创建图表：

首先，你需要在你的HTML文件中引入Chart.js库的代码：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

在HTML文件中创建一个Canvas元素，用于显示图表：

<canvas id="myChart"></canvas>

使用JavaScript代码编写你的图表逻辑。以下是一个示例代码，演示如何使用Chart.js从REST接口获取数据并在图表中显示：

// 获取数据的逻辑，可以使用fetch或其他方法从REST接口获取数据
const fetchData = async () => {
  const response = await fetch('your_rest_api_url');
  const data = await response.json();
  return data;
};

// 创建图表
const createChart = async () => {
  const data = await fetchData();
  const labels = data.map(entry => entry.DATE);
  const values = data.map(entry => entry.VERSION);

  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
    type: 'line', // 可根据需求选择不同类型的图表
    data: {
      labels: labels,
      datasets: [{
        label: 'Version',
        data: values,
        borderColor: 'blue',
        fill: false
      }]
    },
    options: {
      // 配置图表的其他选项
    }
  });
};

// 调用函数来创建图表
createChart();

通过上述步骤，你可以使用Chart.js轻松地从REST接口获取数据并在图表中显示出来。