Highcharts轻松构建交互性图表（Nodejs版）

Highcharts轻松构建交互性图表（Nodejs版）

alt Highcharts轻松构建交互性图表

前言：

在大数据时代，数据可视化技术显得至关重要。一个设计优雅的信息图，能在一个600px*400px的画布上，显示出各种行业的全球市场的几百万条数据。

“如果图像能通过数据驱动，如果图像能动起来，如果图像支持交互，如果还能画股票K线图”，那才我想要的。Highchart是一个基于Javascript的跨浏览器的图形可视化工具，能满足我的需求。

文章目录：

  • highchart介绍
  • highchart项目构建
  • highchart使用
  • highstock使用
  • 项目源代码

请查看博客文章

http://blog.fens.me/nodejs-highcharts/


2 回复

Highcharts轻松构建交互性图表（Nodejs版）

前言：

在大数据时代，数据可视化技术变得尤为重要。一个设计良好的信息图可以在一个600x400像素的画布上展示出多个行业的全球市场上的数百万条数据。如果这些图像能够通过数据驱动、动态变化，并且支持用户交互，甚至是绘制股票K线图，那就再好不过了。Highcharts是一个基于JavaScript的跨浏览器图形可视化工具，它能够满足这些需求。

文章目录：

  • Highcharts介绍
  • Highcharts项目构建
  • Highcharts使用
  • Highstock使用
  • 项目源代码

Highcharts介绍

Highcharts 是一个强大的图表库，它可以生成包括折线图、柱状图、饼图、散点图等在内的多种类型的图表。它支持多种交互功能，如缩放、平移、点击事件等。此外，Highcharts 还提供了 Highstock 库专门用于金融时间序列数据的可视化。

Highcharts项目构建

首先，确保你的项目环境中安装了 Node.js 和 npm。接下来，创建一个新的 Node.js 项目并安装必要的依赖：

mkdir highcharts-nodejs
cd highcharts-nodejs
npm init -y
npm install express ejs --save

然后，在项目根目录下创建 index.js 文件，用于启动服务器，并在 views 目录下创建 index.ejs 文件，用于渲染页面。

// index.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    res.render('index', { title: 'Highcharts Example' });
});

app.listen(3000, () => console.log('App listening on port 3000!'));

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
    <script>
        // Highcharts 示例代码
        Highcharts.chart('container', {
            title: {
                text: 'Monthly Average Temperature'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                }
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }]
        });
    </script>
</body>
</html>

Highcharts使用

在上面的例子中，我们使用了 Highcharts.chart 方法来创建一个简单的折线图。series 属性定义了图表的数据，xAxis 和 yAxis 定义了坐标轴的配置。

Highstock使用

如果你需要处理时间序列数据，比如股票价格，可以使用 Highcharts 的 Highstock 库。Highstock 提供了更专业的金融图表功能，如 K 线图、成交量图等。

项目源代码

完整的项目源代码可以在以下链接中找到：Highcharts 示例。

通过以上步骤，你就可以在 Node.js 项目中轻松地使用 Highcharts 构建交互性图表了。希望这篇文章对你有所帮助！


要在Node.js中使用Highcharts构建交互性图表，可以按照以下步骤进行：

Highcharts介绍

Highcharts 是一个基于JavaScript的库，用于创建交互式图表。它支持多种图表类型，包括折线图、柱状图、饼图等，并且可以与各种后端技术（如Node.js）结合使用。

Highcharts项目构建

  1. 初始化项目 创建一个新的Node.js项目并安装必要的依赖：

    mkdir node-highcharts
cd node-highcharts
npm init -y
npm install express ejs

  2. 安装Highcharts 你可以直接从Highcharts官网下载所需的文件，或者使用CDN链接。 为了简单起见，我们使用CDN链接。

Highcharts使用

  1. 创建服务器 使用Express搭建一个简单的HTTP服务器：

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

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index', { title: 'Highcharts Demo' });
});

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

  2. 创建视图 创建一个EJS模板来渲染Highcharts图表：

    <!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <div id="container" style="height: 400px; width: 600px;"></div>
  <script>
    Highcharts.chart('container', {
      chart: {
        type: 'line'
      },
      title: {
        text: 'Monthly Average Temperature'
      },
      subtitle: {
        text: 'Source: WorldClimate.com'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      yAxis: {
        title: {
          text: 'Temperature (°C)'
        }
      },
      plotOptions: {
        line: {
          dataLabels: {
            enabled: true
          }
        }
      },
      series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
      }]
    });
  </script>
</body>
</html>

Highstock使用

如果你需要更复杂的金融图表（例如K线图），可以使用Highstock。Highstock是Highcharts的一个子集，专门用于股票和时间序列数据。

npm install highcharts-stock

然后在你的EJS模板中引入Highstock：

<script src="https://code.highcharts.com/stock/highstock.js"></script>

并在配置中使用Highcharts.stockChart代替Highcharts.chart。

项目源代码

完整的项目源代码可以参考GitHub仓库，这里提供了一个简单的示例。

希望这些步骤能帮助你开始使用Highcharts构建交互性图表！

回到顶部