【已解决】Highcharts 报表 怎么与Nodejs交互呢？

【已解决】Highcharts 报表 怎么与Nodejs交互呢？

对于新人来说，很蛋疼的问题。Highcharts怎么跟后台的交互数据，或者说Highcharts怎么得到数据。 后台传前台ejs模板中是用foreach，而前台如果是JS，该怎么整呢？用Ajax？ 哪位大神有相关的案例或者指点指点一下

8 回复

当然可以。在Web应用中，前端（例如使用Highcharts生成图表）和后端（例如Node.js服务器）之间的数据交互通常通过AJAX来实现。这里我将提供一个简单的例子来展示如何使用Highcharts与Node.js进行交互。

后端（Node.js）

首先，我们需要一个简单的Node.js服务器，它能够接收来自客户端的请求，并返回一些数据。我们将使用Express框架来简化这个过程。

  1. 安装必要的依赖：

    npm install express

  2. 创建一个简单的Express应用：

    // server.js
const express = require('express');
const app = express();
const port = 3000;

// 模拟的数据源
const data = [
  { name: 'Jan', y: 49.9 },
  { name: 'Feb', y: 71.5 },
  { name: 'Mar', y: 106.4 },
  { name: 'Apr', y: 129.2 },
  { name: 'May', y: 144.0 },
  { name: 'Jun', y: 176.0 },
  { name: 'Jul', y: 135.6 },
  { name: 'Aug', y: 148.5 },
  { name: 'Sep', y: 216.4 },
  { name: 'Oct', y: 194.1 },
  { name: 'Nov', y: 95.6 },
  { name: 'Dec', y: 54.4 }
];

app.get('/data', (req, res) => {
  res.json(data);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

前端（Highcharts + AJAX）

接下来，我们创建一个简单的HTML页面，使用Highcharts从Node.js服务器获取数据并绘制图表。

  1. 引入必要的库：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Highcharts Example</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="container" style="width:100%; height:400px;"></div>
  <script>
    $(document).ready(function() {
      $.getJSON('/data', function(data) {
        Highcharts.chart('container', {
          chart: {
            type: 'column'
          },
          title: {
            text: 'Monthly Average Rainfall'
          },
          xAxis: {
            categories: data.map(item => item.name)
          },
          yAxis: {
            title: {
              text: 'Rainfall (mm)'
            }
          },
          series: [{
            name: 'Rainfall',
            data: data.map(item => item.y)
          }]
        });
      });
    });
  </script>
</body>
</html>

解释

  • 后端：我们创建了一个Express服务器，监听/data路径，并返回一个包含月度降雨量模拟数据的JSON响应。

  • 前端：我们使用jQuery的$.getJSON()方法向后端发起GET请求，获取数据。然后，使用这些数据初始化一个Highcharts实例，创建一个柱状图。

这样，我们就完成了Highcharts与Node.js之间的基本交互。希望这对您有所帮助！


如果使用EJS模板的话，可以将数据返回的页面中，然后在HC中直接调用就可以了 如果使用Ajax的话，可以用node写数据服务，返回的就是HC需要的json 然后在HC中使用Ajax请求服务，将数据填到HC的series下

ejs模板，hc调用，怎么个调用法，有没有相关实例呢？

直接在jquery的ajax的回调里面写就行了，

转格式好麻烦 而且我是用get请求。 也就是一进页面就价值

ajax交互方式

前端 $(document).ready(function(){ var getjson = $.ajax({url:"/api/sales-base-big",async:false}).responseText; $(".alovecakechart").highcharts({ chart: { type: ‘column’ }, title: { text: ‘ALOVE+ 即时销售统计’ }, xAxis: { categories: JSON.parse(getjson)[‘main’] }, yAxis: { title: { text: ‘销量’ } }, series: [{ name: ‘销售总量’, data: JSON.parse(getjson)[‘val’] }, { name: ‘有效量（产生价值）’, data: JSON.parse(getjson)[‘val1’] }] }); })

后端 res.send({“main”:arr,“val”:val,“val1”:val1})

多谢，已经解决。

要让 Highcharts 与 Node.js 进行数据交互，通常的做法是通过前端的 AJAX 请求从后端获取数据，然后使用这些数据来绘制图表。以下是一个简单的示例来说明如何实现这一过程。

后端 (Node.js)

首先，你需要一个简单的 Node.js 服务器来处理请求并返回 JSON 数据。这里使用 Express 来简化操作：

const express = require('express');
const app = express();
const port = 3000;

app.get('/data', (req, res) => {
    const data = [
        {name: 'Jan', y: 49.9},
        {name: 'Feb', y: 71.5},
        {name: 'Mar', y: 106.4}
        // 添加更多数据点...
    ];
    res.json(data);
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

前端 (HTML + JavaScript)

在前端，你可以使用 jQuery 或纯 JavaScript 的 fetch 方法来获取这些数据，并将其传递给 Highcharts。

使用 jQuery

如果你更喜欢使用 jQuery，可以通过这种方式加载数据：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Highcharts Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
$(document).ready(function() {
    $.ajax({
        url: '/data',
        type: 'GET',
        success: function(result) {
            Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Monthly Average Rainfall'
                },
                xAxis: {
                    categories: result.map(item => item.name)
                },
                yAxis: {
                    title: {
                        text: 'Rainfall (mm)'
                    }
                },
                series: [{
                    name: 'Rainfall',
                    data: result.map(item => item.y)
                }]
            });
        }
    });
});
</script>
</body>
</html>

使用 Fetch API

如果不使用 jQuery，可以改用现代浏览器提供的 fetch API:

<script>
document.addEventListener('DOMContentLoaded', function() {
    fetch('/data')
        .then(response => response.json())
        .then(data => {
            Highcharts.chart('container', {
                // 同上
            });
        })
        .catch(error => console.error('Error fetching data:', error));
});
</script>

以上代码展示了一个简单的后端服务器如何提供数据以及前端如何通过 AJAX 调用获取这些数据并绘制图表。这样你就可以将 Highcharts 和 Node.js 结合起来实现动态的数据可视化了。

回到顶部