如何在WordPress网站中正确安装配置Highcharts Stock实现折线类图表

首先明确你的核心疑问：是的，如果你要使用Highcharts Stock的功能，直接用highstock.js即可，不需要再额外引入highcharts.js，因为highstock.js已经完整包含了基础Highcharts的所有功能，重复引入反而会导致脚本冲突。

你目前的操作有两个明显的错误需要先修正：

• 你之前在head里同时引入了多个不同来源、不同版本的highcharts、highstock脚本，重复加载会直接导致功能异常，先把这些历史引入全部删除
• 你写的本地脚本路径/js/highstock.js和你实际上传的路径不匹配，你是把文件传到了wp-content/plugins/Highcharts目录下，路径写错了自然加载不到资源

正确操作步骤 #

1. 选择合适的脚本引入方式（三选一即可，不需要全部加） #

方式1：使用官方CDN（操作最简单，无需维护本地文件）

直接在网站head中仅添加以下一行代码即可，指定9.3.1版本避免后续官方更新导致兼容问题：

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

方式2：使用你已经上传到服务器的本地文件

用你上传到Cpanel的文件的话，正确的引入路径应该是：

<script src="/wp-content/plugins/Highcharts/highstock.js"></script>

方式3：WordPress推荐的规范引入方式（避免主题更新被覆盖）

直接硬改主题的head代码在主题更新后会被清空，更稳妥的方式是通过主题的functions.php文件用WordPress官方提供的wp_enqueue_script函数加载脚本，或者使用自定义脚本插入类的WordPress插件来添加这段引入代码，不用修改主题源码，操作门槛更低。

2. 验证引入是否成功 #

添加完引入代码后，打开网站页面，按F12调出浏览器开发者工具，切换到「网络」面板刷新页面，查看highstock.js的加载状态，如果没有404报错、加载状态为成功，就可以开始编写图表渲染的代码了。

内容的提问来源于stack exchange，提问作者YiChing