今天我将带大家一起学习如何安装和配置 Highcharts。
Highcharts 是一款功能强大的数据可视化库，能够帮助我们轻松创建各种交互式图表，无论是在网页还是应用程序中都非常实用。
第一部分：准备工作
在开始安装之前，请确保您已经在电脑上安装了以下工具：
1. Node.js 和 npm：这是 JavaScript 的运行环境和包管理工具，您可以前往 [Node.js 官方网站](https://nodejs.org/)下载并安装最新版本。
2. 代码编辑器：例如 Visual Studio Code、Sublime Text 或者其他您喜欢的编辑器。
3. 浏览器：例如 Google Chrome、Firefox 等，用于查看我们创建的图表。
第二部分：通过 npm 安装 Highcharts
我们首先来看第一种也是最常用的方法，通过 npm 安装 Highcharts。
步骤1：创建项目文件夹
- 打开您的终端或命令提示符，导航到您希望存放项目的目录。
- 输入以下命令创建一个新的项目文件夹：
```bash
mkdir highcharts-demo
cd highcharts-demo
`
步骤2：初始化项目
- 在项目目录中，输入以下命令初始化一个新的 npm 项目：
```bash
npm init -y
```
这将创建一个默认的 `package.json` 文件。
步骤3：安装 Highcharts
继续在终端中输入以下命令安装 Highcharts：
```bash
npm install highcharts --save
```
这将把 Highcharts 添加到您的项目依赖中。
步骤4：创建示例文件
- 在项目目录中，创建一个新的 `index.html` 文件和一个 `app.js` 文件。
- 在 `index.html` 中，输入以下内容：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Demo</title>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<!-- 引入 Highcharts -->
<script src="node_modules/highcharts/highcharts.js"></script>
<!-- 引入自定义脚本 -->
<script src="app.js"></script>
</body>
</html>
步骤5：创建简单的图表
- 在 `app.js` 文件中，添加以下内容：
```javascript
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Highcharts 简单示例'
},
xAxis: {
categories: ['一月', '二月', '三月', '四月', '五月', '六月']
},
yAxis: {
title: {
text: '数值'
}
},
series: [{
name: '示例数据',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}]
});
});
```
步骤6：运行并查看效果
在终端中，您可以使用任何静态服务器来运行项目，例如使用 `live-server`：
```bash
npm install -g live-server
live-server
`
这将自动在浏览器中打开您的 `index.html` 文件，您应该能够看到一个简单的折线图。
提示：
您还可以根据需要安装其他 Highcharts 模块，例如 Highcharts Stock、Maps 或 Gantt，只需运行相应的安装命令：
bash
npm install highcharts highcharts-stock --save ```
然后在您的 HTML 文件中引入相应的脚本文件即可。
第三部分：通过 CDN 加载 Highcharts
接下来，我们来看第二种方法，通过 CDN 加载 Highcharts。
步骤1：创建简单的 HTML 文件
- 创建一个新的 `index.html` 文件，输入以下内容：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts CDN Demo</title>
<!-- 引入 Highcharts CDN -->
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Highcharts CDN 示例'
},
xAxis: {
categories: ['苹果', '香蕉', '橙子']
},
yAxis: {
title: {
text: '数量'
}
},
series: [{
name: '小明',
data: [1, 4, 3]
}, {
name: '小红',
data: [5, 7, 2]
}]
});
});
</script>
</body>
</html>
```
步骤2：打开文件查看效果
- 直接在浏览器中打开这个 `index.html` 文件，您将看到一个简单的柱状图，无需任何额外的安装步骤。
提示：
- 使用 CDN 的好处是简单快捷，适合于快速测试和开发。然而，在生产环境中，建议您指定特定版本的 Highcharts，以确保代码的稳定性。例如：
```html
<script src="https://code.highcharts.com/10.0.0/highcharts.js"></script>
```
第四部分：通过本地文件加载 Highcharts
最后，我们来看通过本地文件加载 Highcharts 的方法。
步骤1：下载 Highcharts
- 前往 [Highcharts 官方网站](https://www.highcharts.com/) 下载所需的 Highcharts 库文件。当然实际上不需要下载。
步骤2：创建 HTML 文件并引入本地文件
- 创建一个新的 `index.html` 文件，内容如下：> ```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts 本地文件示例</title>
<!-- 引入本地 Highcharts 文件 -->
<script src="js/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Highcharts 本地文件示例'
},
series: [{
name: '占比',
data: [
{ name: 'Chrome', y: 61.41 },
{ name: 'Edge', y: 11.84 },
{ name: 'Firefox', y: 10.85 },
{ name: 'Safari', y: 4.67 },
{ name: '其他', y: 11.23 }
]
}]
});
});
</script>
</body>
</html>
步骤3：在浏览器中查看效果
打开 `index.html` 文件，您将看到一个饼图展示了不同浏览器的市场占比。
现在，您已经成功安装并配置好了Highcharts！如果您想要对Highcharts进行更多的探索，欢迎访问HighchartsGPT，也可以加入我们的Highcharts可视化技术交流群，与更多志同道合的朋友一起交流和学习。
您可以观看这次的安装教程，
Highcharts安装视频-CDN安装教程
Highchatrs-本地加载Highcharts
Highcharts入门-NPM安装教程
备注：
在实际操作过程中，请根据您的具体项目结构和需求调整文件路径和配置。
如果您需要更多高级功能，例如使用 Highcharts Stock、Maps 或 Gantt，可以参考官方文档获取详细的安装和配置指南。
确保在生产环境中锁定 Highcharts 的特定版本，以保证应用的稳定性。
扫一扫
5320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
