如何在macOS桌面应用集成Highcharts

Highcharts 是一个基于 JavaScript 的 Web 图表库，没有原生 macOS 桌面库。

在 macOS 应用中，常见方式是通过 WKWebView 加载本地网页；如果应用基于 Electron，也可以按普通 Web 应用的方式集成。

SwiftUI + `WKWebView`

将 Highcharts 文件和页面打包进应用资源，例如放在 web/ 目录。
在页面中引用 Highcharts 并创建图表。
用 NSViewRepresentable 将 WKWebView 嵌入 SwiftUI。

例如，web/index.html：

html 复制代码

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="./highcharts.js"></script>
</head>
<body>
  <div id="container" style="width: 100%; height: 360px;"></div>
  <script>
    Highcharts.chart('container', {
      title: { text: '月度销售额' },
      xAxis: {
        categories: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        title: { text: '销售额' }
      },
      series: [{
        type: 'column',
        name: '销售额',
        data: [12, 18, 15, 24, 20, 30]
      }]
    });
  </script>
</body>
</html>

SwiftUI 包装代码：

Swift 复制代码

import SwiftUI
import WebKit

struct HighchartsView: NSViewRepresentable {
    func makeNSView(context: Context) -> WKWebView {
        let webView = WKWebView()

        guard
            let pageURL = Bundle.main.url(
                forResource: "index",
                withExtension: "html",
                subdirectory: "web"
            ),
            let webDirectory = Bundle.main.url(
                forResource: "web",
                withExtension: nil
            )
        else {
            return webView
        }

        webView.loadFileURL(
            pageURL,
            allowingReadAccessTo: webDirectory
        )
        return webView
    }

    func updateNSView(_ nsView: WKWebView, context: Context) {}
}

struct ContentView: View {
    var body: some View {
        HighchartsView()
            .frame(minWidth: 600, minHeight: 400)
    }
}

请在 Xcode 中将 web 目录作为应用资源打包，并保留 index.html 与 highcharts.js 的相对路径。若数据由 Swift 提供，可用 WKWebView.evaluateJavaScript 更新图表，或通过 WKScriptMessageHandler 建立双向通信；建议只开放必要的桥接操作，并谨慎处理传入数据。

其他注意事项：

桌面应用建议打包本地 Highcharts 文件，不要依赖用户能访问 CDN。
如需图表无障碍支持，可按需加载 Highcharts Accessibility 模块。
图表产品通常不需要在运行时代码中配置 License ID。面向客户分发的桌面产品，授权范围请通过 OEM 授权咨询确认。
更多安装方式见安装文档。Highcharts 的 iOS wrapper 是社区维护项目；不能据此假定它提供 macOS 支持。

总体方案/技术架构

一、使用 WKWebView 嵌入 Highcharts

Swift / Objective-C macOS App
↓
WKWebView (WebKit)
↓
加载 HTML + Highcharts JS

二、开发步骤（以 Swift 为例）

1. 创建 macOS 项目（使用 Xcode）

打开 Xcode → File → New → Project
选择 App → macOS → 填写项目信息（使用 Swift）

2. 在界面添加 WKWebView（或用代码创建）

权限和设置（如有需要）

在 App Sandbox 打开 Outgoing Connections (Client)，如果要从外部加载 https://code.highcharts.com。

优化建议

✅ 将 Highcharts JS 文件 本地化，避免因网络问题导致图表加载失败。
✅ 将 chart 配置参数从原生传递到 JS，可使用 evaluateJavaScript(...) 方法动态交互。

适合场景

桌面可视化数据平台
轻量级 BI 工具或分析仪表板
本地离线数据展示客户端

总结

方向	技术方案
主语言	Swift（或 Objective-C）
图表展示	使用 `WKWebView` 嵌入 Highcharts
数据交互	Swift 与 JS 双向通信
高级功能	可使用本地数据或 SQLite、CoreData 作为数据源