- 首页
- /立即试用
JavaScript
Highcharts Javascript
所有 Highcharts 库都可以运行在纯 Javascript 环境，完全基于浏览器技术。所有核心功能运行在浏览器中。如果需要更多信息，可以访问 Highcharts Javascript 集成 页面.
查看 Highcharts 的 GitHub
通过 CDN 使用 Highcharts
不需要下载，直接使用 Highcharts CDN 就能获取所有文件。
<script src="https://code.highcharts.com/highcharts.js"></script>通过 NPM 安装
Highcharts 的官方 NPM 包 支持 CommonJS，并且包括所有的核心、股票、地图和甘特图包。阅读了解 如何通过 NPM 安装 Highcharts。
npm install highcharts --save
模块化加载或定制化构建
你也可以通过 ES 模块、UMD 模块、Typescript 模块等格式从 CDN 加载 Highcharts，此外你还可以进行自己的定制化构建，使其只包含你需要的功能。
安装
下载我们的产品
压缩包内包含了 Javascript 文件和示例，在解压后您可以在浏览器里打开 index.html 来查看示例。
Highcharts Core 11.4.0
Highcharts Stock 11.4.0
Highcharts Maps 11.4.0
Highcharts Gantt 11.4.0
Highcharts Dashboards 2.0.0
TypeScript
Typescript
Highcharts 支持 TypeScript。
通过代码编辑器，Highcharts 可以提供代码补全、文档说明和类型检查。
在 TypeScript 项目中使用 Highcharts
从 NPM 安装最新的带有类型定义的 Highcharts
npm install highcharts
使用自定义类型扩展 Highcharts
如果你修改了 Highcharts 的代码，那么你也可以通过扩展 Highcharts 的类型来获得完善的 typescript 支持。
declare module `highcharts` { interface Options { myCustomOption: Record; }}
React
Highcharts for React
安装
通过 npm
npm install highcharts-react-official
通过 yarn
yarn add highcharts-react-official
引入
引入 highcharts 和它的 react 插件
import Highcharts from 'highcharts'import HighchartsReact from 'highcharts-react-official'在 JSX 中也可以使用
<HighchartsReact highcharts={Highcharts} options={options}/>
Vue
Highcharts for Vue
安装
通过 npm
npm install highcharts-vue
通过 yarn
yarn add highcharts-vue
通过一个 script 标签
<script src="https://cdn.jsdelivr.net/npm/highcharts-vue/dist/highcharts-vue.min.js"></script>演示: https://jsfiddle.net/BlackLabel/21nb5u98/
引入和注册
引入 highcharts 并注册：
import HighchartsVue from 'highcharts-vue'// Vue 2Vue.use(HighchartsVue)// Vue 3createApp(App).use(HighchartsVue)使用
使用 highcharts 组件，并注入配置项
<highcharts :options="chartOptions"/>文档: https://github.com/highcharts/highcharts-react
Github 代码仓库的首页包含了所有使用这个库所必要的基本信息。点击上面的链接了解更多细节。欢迎在这个仓库请求新特性或者报告bug。
Angular
Highcharts for Angular
安装
通过 npm 安装 angular 集成
npm install highcharts-angular
确保您已经安装了 Highcharts 本身
npm install highcharts
将 HighchartsChartModule 添加到你的 app.module.ts 文件的 imports 属性中：
import { HighchartsChartModule } from 'highcharts-angular';@NgModule({ imports: [ ...HighchartsChartModule ]})引入
在你想要使用图表的组件中引入 Highcharts：
import * as Highcharts from 'highcharts';使用
分别为每个图表创建一个组件，使用属性绑定将图表库和图表配置项注入。
图表配置项可以直接写在组件的 ts 文件中。
export class YourComponent { Highcharts: typeof Highcharts = Highcharts; chartOptions: Highcharts.Options = { series: [{ data: [1, 2, 3] }]};
.NET
Highcharts .NET
安装
通过 Visual Studio – 使用右键菜单中的 “管理 Nuget 包”。
引入
在 cshtml 文件中引入 highcharts、相关模块（下方示例中的 exporting.js）和封装。
<script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script>@using Highsoft.Web.Mvc.Charts@using Highsoft.Web.Mvc.Charts.Rendering;使用
如果你是 MVC 项目的话，在 cshtml 文件中这样使用：
@{ var chartOptions = new Highcharts{...}; var renderer = new HighchartsRenderer(chartOptions);}@Html.Raw(renderer.RenderHtml())
iOS
Highcharts for iOS
安装
通过 Swift Package Manager:
https://github.com/highcharts/highcharts-ios
通过 Cocoapods:
pod 'Highcharts'
或者直接下载:
https://github.com/highcharts/highcharts-ios/tree/master/Highcharts.xcframework
引入和预加载
在你的 AppDelegate.swift 文件顶部引入 Highcharts:
import Highcharts在你的 application:didFinishLaunchingWithOptions 方法中添加这一行:
HIChartView.preload()使用
- 在视图中创建并添加一个 HIChartView；
- 创建并配置 HIOptions 对象，然后将它设置给 HIChartView：
let options = HIOptions()// ...chartView.options = options
Android
Highcharts for Android
安装
通过 Jitpack:
dependencies {
implementation 'com.github.highcharts:highcharts-android:10.3.
}
或者 直接下载:
https://github.com/highcharts/highcharts-android/blob/master/highcharts-android.aar
引入
在你想要使用图表的类中引入 Highcharts：
import com.highsoft.highcharts.core.*;import com.highsoft.highcharts.common.HIChartsClasses.*;使用
- 在视图中创建并添加一个 HIChartView；
- 创建并配置 HIOptions 对象，然后将它设置给 HIChartView：
HIOptions options = new HIOptions();// ...chartView.setOptions(options); 刚起步需要帮助？
看看这些资源
Highcharts 在所有商业图表库中拥有最棒的开发者社区，我们的社区成员希望在您需要的时候提供额外的帮助、针对特定平台的实现建议和灵感。
Highcharts 论坛
前往论坛Stack Overflow
前往 Stack OverflowGithub
前往 GitHub技术支持门户网站
前往提交工单Highcharts GPT
Highcharts GPT图表选择器
图表选择器自定义项目
前往沟通