使用Google Chart API 创建实时图表

最新推荐文章于 2024-08-25 10:01:48 发布

allway2

最新推荐文章于 2024-08-25 10:01:48 发布

阅读量2.7k

点赞数

本文链接：https://blog.csdn.net/allway2/article/details/109959962

版权

实时图表可以实时显示数据。这意味着数据将永久更新以始终显示当前图表。要创建实时图表，我们使用JavaScript和Google Chart API。

这些实时图表通常用于仪表板中，以显示例如温度或价格的变化情况。应用领域多样，它们看起来确实不错。你自己看！

实时图表–折线图

我在这里向您展示，您可以创建此实时图表。它每250毫秒更新一次，并显示（在我们的示例中）随机数据。在生产性使用中，它可以从数据库或直接从传感器读取和显示数据。

那不是全部。可以将相同的概念1：1转移到其他图表中，其中包括：

地理图
条形图
折线图
饼形图
甜甜圈图
时间线
所有可能的图形列表

Google Chart API –简短介绍

在谷歌图表API是一个免费的谷歌服务，使我们能够展示我们的网站或网络应用程序的各种图表和图形。

此外，图表还为用户提供了交互功能。例如，悬停时可以显示带有当前元素值的弹出窗口。

数据静态显示。但是我们围绕它开发我们自己的系统，以便可以在一定间隔内更新数据，从而获得实时图表。然后（实时）实时更新数据，并达到预期的效果。

1.嵌入Google Chart API

必须通过此脚本标记包括Google Chart API。这里无法在本地托管，因为Google的服务条款禁止这样做。

<script type="text/javascript" loading="lazy" src="https://www.gstatic.com/charts/loader.js"></script>

2.创建HTML容器

接下来我们需要一个简单的div。之后，Google API将图表绘制为SVG或VML。

<div id="chart_div"></div>

3.初始化和配置Google Chart API

在以下代码中，我们从Google Chart Packages中加载折线图软件包。然后我们将该函数drawChart()称为回调。该API将在完全加载后立即执行。

// load current chart package
google.charts.load("current", {
  packages: ["corechart", "line"]
});

// set callback function when api loaded
google.charts.setOnLoadCallback(drawChart);

接下来，我们创建一个带有标签（未显示）和图表默认数据的对象。我们还需要一个带有选项的数组。在这里，我们设置标题和轴标签。

所有参数都可以在Google Chart文档中找到。

然后我们选择HTML容器并chart.draw(data, options)绘制图表。

function drawChart() {

  // create data object with default value
  let data = google.visualization.arrayToDataTable([
    ["Year", "CPU Usage"],
    [0, 0]
  ]);

  // create options object with titles, colors, etc.
  let options = {
    title: "CPU Usage",
    hAxis: {
      title: "Time"
    },
    vAxis: {
      title: "Usage"
    }
  };

  // draw chart on load
  let chart = new google.visualization.LineChart(
    document.getElementById("chart_div")
  );
  chart.draw(data, options);
}

大

使用前面的代码，现在已经绘制了表格，我们可以对其进行初步了解。

没有数据的简单折线图–使用Google Chart API创建

4.动态更新数据

现在我们来谈谈最重要的部分，即为什么要在这里-动态更新数据。这就是我们“创建”实时图表的方式。

我们以250ms的间隔将新数据插入到图表中。

该变量index用于将另一个元素作为行插入，没有其他含义。在此示例中，我生成随机数，应将其理解为CPU使用率。在这里，您必须在第5行中插入自己的数据。

您可以例如通过Ajax请求来执行此操作。因此，您可以使用PHP和数据库类直接从数据库中读取数据，也可以编写自己的RestAPI（例如，使用Node.js）。

let index = 0;
setInterval(function() {

  // instead of this random, you can make an ajax call for the current cpu usage or what ever data you want to display
  let random = Math.random() * 30 + 20;

  data.addRow([index, random]);
  chart.draw(data, options);

  index++;
}, 250);

现在在这里再次将完整代码放在一个文件中。为了清楚起见，我将所有内容打包到一个文件中。但是您应该将JavaScript和CSS放在其他文件中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        #chart_div {
            width: 1200px;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <!-- CONTAINER FOR CHART -->
    <div id="chart_div"></div>
    <script type="text/javascript" loading="lazy" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>

        // load current chart package
        google.charts.load("current", {
            packages: ["corechart", "line"]
        });

        // set callback function when api loaded
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            // create data object with default value
            let data = google.visualization.arrayToDataTable([
                ["Year", "CPU Usage"],
                [0, 0]
            ]);

            // create options object with titles, colors, etc.
            let options = {
                title: "CPU Usage",
                hAxis: {
                    title: "Time"
                },
                vAxis: {
                    title: "Usage"
                }
            };

            // draw chart on load
            let chart = new google.visualization.LineChart(
                document.getElementById("chart_div")
            );
            chart.draw(data, options);

            // interval for adding new data every 250ms
            let index = 0;
            setInterval(function() {

                // instead of this random, you can make an ajax call for the current cpu usage or what ever data you want to display
                let random = Math.random() * 30 + 20;

                data.addRow([index, random]);
                chart.draw(data, options);

                index++;
            }, 250);

        }
    </script>
</body>

</html>

扩大