如何在blogdown站点中正确显示highcharter交互式图表？

• 检查Hugo主题的JS加载策略
  很多Hugo主题会延迟加载或合并JS文件，导致highcharter依赖的Highcharts核心JS没在图表渲染前加载。可以在R Markdown文件开头添加{=html}块，手动引入Highcharts CDN：

  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/highcharts-more.js"></script>
  <!-- 按需引入其他模块，比如导出模块 -->
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  

  不要依赖blogdown自动注入的JS，因为主题可能覆盖或推迟加载顺序。

• 调整highcharter的输出设置
  在R代码块中禁用自动加载Highcharts JS，避免重复加载冲突：

  library(highcharter)
  hc <- highchart() %>% 
    hc_add_series(data = c(1,3,2,4)) %>%
    hc_chart(type = "line") %>%
    hc_exporting(enabled = TRUE)
  # 手动控制图表渲染
  htmlwidgets::onRender(hc, "function(el, x) { Highcharts.chart(el, x.options); }")
  

  也可以用use_highcharts(FALSE)来关闭自动注入脚本。

• 排查Hugo的资源处理配置
  检查config.toml（或config.yaml）中的资源配置，确保没禁用JS资源复制：

  [params]
    js = ["js/custom.js"] # 确保主题允许额外JS引入
  [module]
    [[module.mounts]]
      source = "static/js"
      target = "static/js"
  

  构建站点后，确认public目录下有highcharter生成的JS文件，若没有，手动把_site/libs/highcharts/下的文件复制到static/libs/highcharts/目录。

• 修复服务器部署的JavaScript错误
  根据开发者工具的错误提示针对性处理：

  • 若提示Highcharts未定义：按第一步手动引入CDN解决核心JS未加载问题。
  • 若路径错误：用站点根相对路径（如/libs/highcharts/highcharts.js）替代页面相对路径。
  • 若主题冲突：临时切换到Hugo默认主题（如hugo-theme-ananke）测试，排除主题兼容性问题。

• 强制刷新缓存
  本地预览时按Ctrl+Shift+R强制刷新浏览器缓存；部署到Netlify时，在部署设置中开启“清除缓存并重新构建”，确保最新资源生效。

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