Highcharts Vue

优质

小牛编辑

142浏览

2023-12-01

Highcharts Vue 是我们基于 Vue 框架封装的 Highcharts，可以很方便的在 Vue 开发环境中使用 Highcharts 创建交互性图表。

开发环境

已经全局安装 Node.js, NPM
Vue, Highcharts 库已经安装在项目中
通过 npm 安装 Highcharts

下载安装

安装 highcharts-vue

npm install highcharts-vue

安装成功显示

npm install

使用

有两种方法可以将 Highcharts-Vue 添加到项目中

1. 全局注册

若想要在应用程序的任何位置使用本插件，请使用全局注册方法。在您的主应用程序文件中导入 Vue 和 Highcharts-Vue 扩展包

import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'

接下来，您可以将其注册为 Vue 对象中的插件：

Vue.use(HighchartsVue)

点击查看示例

2. 局部注册

若仅用于特定组件，请使用局部注册方法。首先，您应该从组件文件中的 Highcharts-Vue 包中导入 Chart 组件对象：

import {Chart} from 'highcharts-vue'

然后，您需要在 Vue 实例配置中注册它，即在 components 部分中

{
    components: {
        highcharts: Chart
    }
}

点击查看示例

注意：如果您想通过 <script> 标签在HTML文档的 <head> 部分引用Highcharts-Vue，您应该使用此包目录下的 dist 目录下的其中一个.js文件。之后， HighchartsVue 对象可以在 window 范围内使用。点击查看示例：JSFiddle示例

配置

1. 选项参数

如果您已经完成上述任务之一（导入和注册组件），它允许您在应用程序中使用 Highcharts-Vue 组件，只需要添加 <highcharts> 元素，而且必须通过它的 :options 参数传递图表配置对象

<highcharts :options="chartOptions"></highcharts>

例如：

new Vue({
    data() {
        return {
            chartOptions: {
                series: [{
                    data: [1, 2, 3] // sample data
                }]
            }
        }
    }
})

2. 导入 Highcharts 模块

要使用任何 Highcharts 模块，您必须将该模块以及 Highcharts 扩展包本身都导入到您的文件中，并将 Highcharts 参数传递给它来添加该模块，例如：

import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'

exportingInit(Highcharts)

3. 实现 stockChart 和 mapChart

Highcharts-Vue 扩展包默认使用 chart 的构造函数，所以如果您需要使用 stockChart 或 mapChart ，只需要按照上面导入 Highcharts 模块的方法导入 stock 或 map 模块，并在你的组件元素中使用 :constructor-type 参数：

import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'

stockInit(Highcharts)

<highcharts :constructor-type="'stockChart'" :options="chartOptions"></highcharts>

4. 加载地图

加载地图并使用它们有两种方法

方法一

安装包含所有地图的 @highcharts/map-collection npm 扩展包，然后导入您需要在项目中使用到的地图：

import Highcharts from 'highcharts'
import mapData from '@highcharts/map-collection/custom/world.geo.json'

Highcharts.maps['myMapName'] = mapData

方法二

不安装包含所有地图的扩展包，从 Highmaps地图集中选择需要使用到的地图，并将地图数据复制到项目中的新文件中。然后只需要将其导入到您想要的任何位置，并以方法一同样的方式使用它。

演示Demo 使用了第二种方法。

5. 更改全局组件标签名称

如果您想要使用另一个名称替代 <highcharts> 作为全局组件标签名，可以在注册插件时传递对象 tagName: [TAG_NAME] 作为选项参数来实现，例如：

import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'

Vue.use(HighchartsVue, {
    tagName: 'charts'
})

之后，您可以使用 charts 作为全局组件标签名：

<charts :options="chartOptions"></charts>

6. 图表回调参数

如果需要使用 Highcharts.chart(renderTo, options[, callback]) 的回调函数，可以通过通过 HTML 组件元素传递 :callback 参数

<highcharts :options="chartOptions" :callback="myCallback">

然后， myCallback 将在图表加载完成后被调用

7. 图表对象引用

您可以在必要时访问 Chart 对象实例（例如，当需要获取某些数据或使用任何 Chart.prototype 函数时），通过调用具体的 Vue 组件实例 chart 字段，但不支持使用其内置的函数更新图表，因为这可能会导致您的应用程序和图表本身之间产生数据同步的问题（它扰乱了使用扩展包的概念）。最推荐的方法是使用演示Demo 中的方法使用它。

8. 使用 Highcharts.setOptions() 方法

如果您想要使用 Highcharts.setOptions() 方法来定义一些将在所有图表上设置的全局参数，我们推荐您在运用程序的主文件中使用它，并且在这之前需要导入 Highcharts 包

import Highcahrts from 'highcharts'

Highcharts.setOptions({
    // options here
})

9. 使用特定的 Highcharts 实例

有时候，您会处于某种原因需要基本特定的 Highcharts 版本创建图表。以下提供了两种方式，您可以根据个人需要选择一种进行设置。

方法一

在设置一个 Highcharts 实例并在注册组件时将其作为一个全局插件，将其作为 options 在 Vue 的安装函数中传递，如下所示：

import Vue from 'vue'
import Highcharts from 'highcharts'
import HighchartsVue from 'highcharts-vue'

Vue.use(HighchartsVue, {
    highcharts: Highcharts
})

完成后，所有的图表将根据传递的实例进行生成

方法二

将 Highcharts 实例通过 highcharts 组件的属性选项进行传递。使用此方法，只有该图表会根据传递的实例进行生成：

<highcharts :options="chartOptions" :highcharts="hcInstance"></highcharts>

import Highcharts from 'highcharts'

export default {
    name: 'app',
    data() {
        return {
            hcInstance: Highcharts,
            chartOptions: {
                series: [{
                    data: [1, 2, 3]
                }]
            }
        }
    }
}

请注意，这两种使用方式都是可选的，因为在默认情况下，扩展包会自动使用可用的 Highcharts 实例

演示程序

如果您想要使用 Highcharts Vue 扩展包创建的实时应用程序，或者指向查看一切应该是什么样子，这里包含了演示示例，您只需要在本地计算机运行即可。要实现这一点，请下载此仓库，打开终端/控制台并在下载好的文件目录下输入以下两个命令：

npm run build:app
npm run app

仓库下载链接 https://github.com/highcharts/highcharts-vue/tree/master/demo
服务器将被运行在 http://localhost:8080

组件属性

以下是扩展包可以处理的允许直接传递给 <highcharts> 组件实例的所有允许参数的列表

.minWidthCenter{min-width:75px;text-align:center}.boldTd{font-weight:700}

参数	类型	是否必须	描述
:options	Object	yes	Highcharts 图表配置对象
:constructor-type	String	no	图表构造函数类型，用于初始化特定图表。允许的参数选项：'chart', 'stockChart', 'mapChart'。第一个为默认值
:callback	Function	no	函数在图表初始化期间作为回调传递，并在图表加载完成后触发
:updateArgs	Array	no	数组 update() 的函数可选参数。参数应该以与原生 Highcharts 函数相同的顺序定义：[redraw, oneToOne, animation]。这里是参数的具体描述。
:highcharts	Object	no	特定的 Highcharts 实例。当需要使用不同的 Highcharts 版本构建图表时非常有用。
:deepCopyOnUpdate	Boolean	no	是否将对象进行深拷贝后传递给 Chart.update() 函数。为了避免传递数组的引用，默认情况下它被设置为 true。注意：这会导致处理大量数据时性能下降，因为复制源数据需要的资源非常巨大，建议在此时将其设置为 false 以禁用该选项。