前言

前端开发中，数据可视化尤为重要，最有效的方式可以通过图表库进行数据可视化，其中 ECharts、Highcharts 提供了丰富的图表，适用各种各样的功能，ECharts 相对来说基本可满足日常使用。但如果你的需求是立体3D图表时，ECharts 就显得力不从心了，这个时候 Highcharts 的优势就体现出来了。

Highcharts概述

Highcharts（官网）是一个用纯 JavaScript 编写的一个图表库。它能够很简单便捷的在 web 网站或是 web 应用程序添加有交互性的图表。

文章目录

一、Highcharts 图表的安装
二、Highcharts 图表的组成
三、Highcharts 图表的生成
四、Highcharts 图表的使用
五、Highcharts 图表的配置

一、安装

通过npm安装

npm install highcharts --save
npm install highcharts-vue

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

main.js 中全局引入并注册

import Highcharts from 'highcharts'
import HighchartsVue from 'highcharts-vue'
Vue.use(Highcharts)
Vue.use(HighchartsVue)

二、Highcharts 图表组成

一般情况下，Highcharts 包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（dataLabels）等。

Highcharts 基本组成部分如下图所示：

三、生成一个 Highcharts

1. 为 Highcharts 准备一个具有宽高的div容器（简单来说就是存放图表的一个占位）

  <div :style="{ width: '100%', height: '500px' }" id="cookieChart"></div>

2. Highcharts 实例化中绑定容器

Highcharts.chart('cookieChart', {// Highcharts 配置
});

当你想愉快的开始使用 Highcharts 时，你会发现页面报了这个错误：
解决： 只需要在页面上再次将 Highcharts 引入即可。

import Highcharts from "highcharts";

四、实例

介于大家用 Highcharts 图表工具可能更趋向于其中的3D图表，所以我们直接看具有3D效果的图表。平面图表大家可参考博主另一篇文章 ----- 史上最全echarts可视化图表详解 。

1. 金字塔图（3D）

金字塔图所需的外部资源，在页面引入并注册即可。

实现效果：

源码如下：

<template><!-- //用来放Highcharts图表的容器，一定要有宽高 --><div class="ChartBox"><div :style="{ width: '100%', height: '100%' }" id="cookieChart"></div></div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import oldie from "highcharts/modules/oldie";
import funnel3d from "highcharts/modules/funnel3d";
import cylinder from "highcharts/modules/cylinder";
import pyramid3d from "highcharts/modules/pyramid3d";
// 注册所需外部资源
Highcharts3d(Highcharts);
funnel3d(Highcharts);
exporting(Highcharts);
oldie(Highcharts);
cylinder(Highcharts);
pyramid3d(Highcharts);
export default {data() {return {// 模拟数据dataList: [{name: "数据一",y: 435,},{name: "数据二",y: 435,},{name: "数据三",y: 543,},{name: "数据四",y: 654,},],};},mounted() {this.init(); //定义一个图表方法在methods中调用},methods: {// 调用init方法init() {Highcharts.chart("cookieChart", {chart: {type: "pyramid3d", //图表类型options3d: {enabled: true, // 是否启用 3D 功能,默认为falsealpha: 10, // 内旋转角度depth: 50, // 外旋转角度viewDistance: 50,},},title: {text: "标题", //标题},plotOptions: {series: {dataLabels: {//数据标签enabled: true, //是否默认显示数据项format: "<b>{point.name}</b>", //通过format函数对当前数据点的点值格式化allowOverlap: true,x: 10, //数据项x轴方向调整y: -5, //数据项y轴方向调整},width: "50%", //图表宽height: "50%", //图表宽center: ["50%", "40%"], //图表位置，左右、上下},},series: [// 数据列{name: "数量", //名称data: this.dataList, //数据},],});},},
};
</script>
<style scoped>
.ChartBox {width: 50em;height: 50vh;
}
</style>

2. 饼图（3D）

饼图所需的外部资源，在页面引入并注册即可。

实现效果：

源码如下：

<template><!-- //用来放Highcharts图表的容器，一定要有宽高 --><div class="ChartBox"><div :style="{ width: '100%', height: '100%' }" id="pieChart"></div></div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import oldie from "highcharts/modules/oldie";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
oldie(Highcharts);
export default {data() {return {// 模拟数据dataList: [{name: "数据一",y: 435,},{name: "数据二",y: 435,},{name: "数据三",y: 543,},{name: "数据四",y: 654,},],};},mounted() {this.init(); //定义一个图表方法在methods中调用},methods: {// 调用init方法init() {Highcharts.chart("pieChart", {chart: {type: "pie",//类型options3d: {enabled: true, // 是否启用 3D 功能,默认为falsealpha: 45,// 内旋转角度beta: 0, // 外旋转角度},},title: {text: "标题",//标题},tooltip: {//鼠标触摸显示值pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",},plotOptions: {pie: {allowPointSelect: true,//是否允许数据点的点击cursor: "pointer",//鼠标触摸变小手depth: 35,//图表高度dataLabels: {enabled: true,//是否允许数据标签format: "{point.name}",},},},series: [// 数据列{type: "pie",//类型name: "占比", //名称data: this.dataList, //数据},],});},},
};
</script>
<style scoped>
.ChartBox {width: 50em;height: 50vh;
}
</style>

3. 柱图（3D）

柱图所需的外部资源，在页面引入并注册即可。

实现效果：

源码如下：

<template><!-- //用来放Highcharts图表的容器，一定要有宽高 --><div class="ChartBox"><div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div></div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
export default {data() {return {// 模拟数据dataList: [{name: "数据一",y: 435,},{name: "数据二",y: 435,},{name: "数据三",y: 543,},{name: "数据四",y: 321,},{name: "数据五",y: 112,},{name: "数据六",y: 214,},{name: "数据七",y: 432,},{name: "数据八",y: 644,},],};},mounted() {this.init(); //定义一个图表方法在methods中调用},methods: {// 调用init方法init() {Highcharts.chart("pillarChart", {chart: {renderTo: "pillarChart", //图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值type: "column", //类型options3d: {enabled: true,// 是否启用 3D 功能,默认为falsealpha: 15, // 内旋转角度beta: 15, // 外旋转角度depth: 100, //3D场景的大小(深度)viewDistance: 25,},},title: {text: "标题", //标题},subtitle: {text: "副标题", //副标题},yAxis: {title: {text: "y轴标题", //左侧标题},},xAxis: {title: {text: "x轴标题",//x轴标题},// 数据项categories: ["x轴1","x轴2","x轴3","x轴4","x轴5","x轴6","x轴7","x轴8"],//x轴数据},plotOptions: {column: {depth: 25, //柱子的横截面宽度},},series: [{name: "图例1", //名称data: this.dataList, //数据},],});},},
};
</script>
<style scoped>
.ChartBox {width: 50em;height: 50vh;
}
</style>

4. 面积图（3D）

面积图所需的外部资源，在页面引入并注册即可。

实现效果：

源码如下：

<template><!-- //用来放Highcharts图表的容器，一定要有宽高 --><div class="ChartBox"><div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div></div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
export default {data() {return {// 模拟数据dataList: [{name: "数据一",y: 51,},{name: "数据二",y: 51,},{name: "数据三",y: 32,},{name: "数据四",y: 31,},{name: "数据五",y: 22,},{name: "数据六",y: 24,},{name: "数据七",y: 32,},{name: "数据八",y: 34,},],dataListTwo: [{name: "数据一",y: 87,},{name: "数据二",y: 86,},{name: "数据三",y: 90,},{name: "数据四",y: 96,},{name: "数据五",y: 86,},{name: "数据六",y: 81,},{name: "数据七",y: 82,},{name: "数据八",y: 88,},],dataListTherr: [{name: "数据一",y: 123,},{name: "数据二",y: 144,},{name: "数据三",y: 113,},{name: "数据四",y: 131,},{name: "数据五",y: 112,},{name: "数据六",y: 134,},{name: "数据七",y: 132,},{name: "数据八",y: 164,},],};},mounted() {this.init(); //定义一个图表方法在methods中调用},methods: {// 调用init方法init() {Highcharts.chart("pillarChart", {chart: {type: "area", //类型options3d: {enabled: true,// 是否启用 3D 功能,默认为falsealpha: 15, // 内旋转角度beta: 30,// 外旋转角度depth: 200,//3D场景的大小(深度)},},title: {text: "标题", //标题},yAxis: {title: {text: "y轴标题",x: -40, //x方向},labels: {//图例format: "{value:,.0f} ml",},gridLineDashStyle: "Dash",//网格线线条样式，Solid、Dot、Dash},xAxis: [{visible: false,//加载时，数据序列默认隐藏。},{visible: false,//加载时，数据序列默认隐藏。},{visible: false,//加载时，数据序列默认隐藏。},],plotOptions: {area: {depth: 100,marker: {enabled: false,},states: {inactive: {enabled: false,},},},},tooltip: {valueSuffix: "ml", //提示框内容拼接的文字},series: [{name: "数据一", //名称lineColor: "rgb(180,90,50)", //线条颜色color: "rgb(200,110,50)", //文字颜色fillColor: "rgb(200,110,50)", //背景色data: this.dataList, //数据},{name: "数据四",xAxis: 1,lineColor: "rgb(120,160,180)",color: "rgb(140,180,200)",fillColor: "rgb(140,180,200)",data: this.dataListTwo,},{name: "数据三",xAxis: 2,lineColor: "rgb(200, 190, 140)",color: "rgb(200, 190, 140)",fillColor: "rgb(230, 220, 180)",data: this.dataListTherr,},],});},},
};
</script>
<style scoped>
.ChartBox {width: 50em;height: 50vh;
}
</style>

5. 圆柱图（3D）

圆柱图所需的外部资源，在页面引入并注册即可。

实现效果：

源码如下：

<template><!-- //用来放Highcharts图表的容器，一定要有宽高 --><div class="ChartBox"><div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div></div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import oldie from "highcharts/modules/oldie";
import cylinder from "highcharts/modules/cylinder";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
oldie(Highcharts);
cylinder(Highcharts);
export default {data() {return {// 模拟数据dataList: [{name: "数据一",y: 51,},{name: "数据二",y: 51,},{name: "数据三",y: 32,},{name: "数据四",y: 31,},{name: "数据五",y: 22,},{name: "数据六",y: 24,},{name: "数据七",y: 32,},{name: "数据八",y: 34,},],};},mounted() {this.init(); //定义一个图表方法在methods中调用},methods: {// 调用init方法init() {Highcharts.chart("pillarChart", {chart: {type: "cylinder",//类型options3d: {enabled: true,// 是否启用 3D 功能,默认为falsealpha: 15,// 内旋转角度beta: 15,// 外旋转角度depth: 50,//3D场景的大小(深度)viewDistance: 25,},},yAxis: {title: {text: "y轴标题",x: -40, //x方向},},xAxis:{title: {text: "x轴标题",//x轴标题},// 数据项categories: ["x轴1","x轴2","x轴3","x轴4","x轴5","x轴6","x轴7","x轴8"],//x轴数据},title: {text: "标题",},plotOptions: {series: {depth: 25,//柱子所在位置(深度)colorByPoint: true,//随机颜色},},series: [{data: this.dataList,//数据name: "名称",showInLegend: false,//是否显示图例},],});},},
};
</script>
<style scoped>
.ChartBox {width: 50em;height: 50vh;
}
</style>

6. 散点图（3D）

散点图所需的外部资源，在页面引入并注册即可。

实现效果：

源码如下：

<template><!-- //用来放Highcharts图表的容器，一定要有宽高 --><div class="ChartBox"><div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div></div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import oldie from "highcharts/modules/oldie";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
oldie(Highcharts);
export default {data() {return {// 模拟数据dataList:[[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4]],};},mounted() {this.init(); //定义一个图表方法在methods中调用},methods: {// 调用init方法init() {Highcharts.chart("pillarChart", {chart: {renderTo: "pillarChart", //图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值margin: 100,type: "scatter",//类型options3d: {enabled: true,// 是否启用 3D 功能,默认为falsealpha: 10,// 内旋转角度beta: 30,// 外旋转角度depth: 250,//3D场景的大小(深度)viewDistance: 5,frame: {// 背景三个面的颜色bottom: { size: 1, color: "rgba(0,0,0,0.02)" },back: { size: 1, color: "rgba(0,0,0,0.04)" },side: { size: 1, color: "rgba(0,0,0,0.06)" },},},},title: {text: "标题",},subtitle: {text: "副标题", //副标题},plotOptions: {scatter: {width: 10, //宽height: 10, //高depth: 10,//3D场景的大小(深度)},},yAxis: {title: "y轴标题",//y轴标题},xAxis:{title: {text: "x轴标题",//x轴标题},// 数据项categories: ["x轴1","x轴2","x轴3","x轴4","x轴5","x轴6","x轴7","x轴8"],//x轴数据},zAxis: {min: 0, // z轴最小值max: 100, // z轴最大值},legend: {enabled: false,//图例显示},series: [{name: "随机数据",//名称colorByPoint: true,//随机颜色data: this.dataList,//数据},],});},},
};
</script>
<style scoped>
.ChartBox {width: 50em;height: 50vh;
}
</style>

7. 堆叠柱图（3D）

堆叠柱图所需的外部资源，在页面引入并注册即可。

实现效果：

源码如下：

<template><!-- //用来放Highcharts图表的容器，一定要有宽高 --><div class="ChartBox"><div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div></div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
export default {data() {return {// 模拟数据dataList: [{name: "小张",data: [5, 3, 4, 7, 2],},{name: "小王",data: [3, 4, 4, 2, 5],},{name: "小彭",data: [2, 5, 6, 2, 1],},{name: "小潘",data: [3, 0, 4, 4, 3],},],};},mounted() {this.init(); //定义一个图表方法在methods中调用},methods: {// 调用init方法init() {Highcharts.chart("pillarChart", {chart: {type: "column", //类型options3d: {enabled: true, // 是否启用 3D 功能,默认为falsealpha: 15, // 内旋转角度beta: 15, // 外旋转角度depth: 40, //3D场景的大小(深度)viewDistance: 25,},marginTop: 80, //图表距离顶部间距marginRight: 40, //图表距离右边间距},title: {text: "标题", //标题},xAxis: {categories: ["x轴1", "x轴2", "x轴3", "x轴4", "x轴5"],},yAxis: {min: 0, //最小值为0allowDecimals: false,title: {text: "y轴标题",},},tooltip: {// 鼠标触摸显示headerFormat: "<b>{point.key}</b><br>",pointFormat:'<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}',},plotOptions: {column: {stacking: "normal", //堆叠,禁止堆叠设置nulldepth: 40, //柱子横截面宽度},},series: this.dataList, //数据});},},
};
</script>
<style scoped>
.ChartBox {width: 50em;height: 50vh;
}
</style>

五、常用配置项

看完以上几个实例，相信你对 Highcharts 图表更加得心应手了，但是在使用 Highcharts 图表的时候避免不了要修改一些官方的配置，下面这些配置你一定会用到，一起往下看吧。

1.去掉右下角官方logo

credits: {enabled: false,//href: "http://www.hcharts.cn", //自定义链接//text:"", //自定义内容
},

2.去掉右上角导出

exporting: {enabled: false,
},

3.图例在图表中上方显示

legend: {layout: "vertical", // 布局类型：horizontal、vertical，即水平布局和垂直布局align: "right", // 水平对齐方式，left、center、right。verticalAlign: "top", // 垂直对齐标准itemMarginTop: 5, // 图例项顶部外边距itemMarginBottom: 3, // 图例项底部外边距floating: true, // 是否浮动，浮动则在图表中显示图例
},

4.设置导出信息为中文

lang: {viewFullscreen: "全屏",contextButtonTitle: "图表导出菜单",decimalPoint: ".",downloadJPEG: "下载JPEG图片",downloadPDF: "下载PDF文件",downloadPNG: "下载PNG文件",downloadSVG: "下载SVG文件",printChart: "打印图表",
},

调整前：

调整后：

5.去掉背景网格线

yAxis: {gridLineWidth: 0,minorGridLineWidth: 0,
},

6.文字倾斜

xAxis: {labels: {rotation: -90, //竖直放rotation: -45, //45度倾斜},
},

7.数据直接显示在柱体上

series: [{dataLabels: {enabled: true,rotation: -90,color: "#FFFFFF",align: "right",format: "{point.y:.1f}", // :.1f 为保留 1 位小数y: 10,},},
],

8.设置柱体的宽度

plotOptions: {column: {pointWidth: 30, //设置柱形的宽度borderWidth: 1, //设置柱子的边框，默认是1},
},

9.设置背景网格线颜色、宽度

yAxis: {gridLineColor: "red",gridLineWidth: "10",
},

10.折现图线条设置平滑

yAxis: {type:'spline',
},

11.去掉饼图外部文字带白边

plotOptions: {pie: {dataLabels: {format: "{point.name}",style: {textOutline: "none",//去掉白边},},},
},

12.饼图字体颜色跟饼图颜色一致

plotOptions: {pie: {dataLabels: {formatter: function () {//饼图字体颜色跟饼图颜色一致return ('<p style="color:' +this.color +'">' +this.point.name +'</p><br><p style="color:' +this.color +'">' +this.percentage.toFixed(1) +"%</p>");},},},
},

此文章持续更新中…

一文带你快速上手Highcharts框架相关推荐

一文带你快速上手正则表达式
正则表达式简介正则表达式在从文本,代码,日志文件,电子表格甚至文档中提取信息时非常有用.尽管形式语言背后有很多理论,但以下教程将探索正则表达式的更实际用法,以便可以尽快使用它们. 使用正则表达式时要 ...
一直在说css3，你真的会用css3吗？一文带你快速上手
文章目录 css3 常用选择器复合选择器关系选择器子元素选择器后代选择器兄弟选择器属性选择器伪类选择器伪元素盒子模型内容区(content) 内边距(padding) 边距(bor ...
ffly-plus 又又又一个`gin` demo项目，带你快速上手用`gin`进行`web`开发!!!!
ffly-plus 又又又一个gin demo项目,带你快速上手用gin进行web开发, 在这个demo项目中,你可以学到项目结构设计.gorm的使用.gin中间件的编写.DB设计规范.Swagger ...
快速上手highcharts
快速上手highcharts 快速上手引入 Highcharts 创建一个简单的图表图表配置图表容器图表样式宽度.高度图表样式其他配置图表类型图表缩放其他图标主要组成及配置标题 ...
AI专家一席谈：复用算法、模型、案例，AI Gallery带你快速上手应用开发
摘要: 华为云社区邀请到了AI Gallery的负责人严博,听他谈一谈AI Gallery的设计初衷.经典案例以及未来规划. 本文分享自华为云社区<AI专家一席谈:复用算法.模型.案例,AI G ...
mockito mock void方法_一文让你快速上手 Mockito 单元测试框架
前言在计算机编程中,单元测试是一种软件测试方法,通过该方法可以测试源代码的各个单元功能是否适合使用.为代码编写单元测试有很多好处,包括可以及早的发现代码错误,促进更改,简化集成,方便代码重构以及许多 ...
一文带你快速入门【哈希表】
最近开始学习哈希表,为此特写一遍文章介绍一下哈希表,带大家快速入门哈希表
六千字带你快速上手操作MySQL
快速上手MySQL mysql基础语法 ### 字段操作字段操作概念语法新增字段对已经存在的表,插入新的字段 alter table [表名] add 字段名数据类型属性修改字段在我 ...
mockito mock void方法_一文让你快速上手 Mockito 单元测试框架（上）
作者|mghio 编辑|包包前言在计算机编程中,单元测试是一种软件测试方法,通过该方法可以测试源代码的各个单元功能是否适合使用.为代码编写单元测试有很多好处,包括可以及早的发现代码错误,促进更改 ...

一文带你快速上手Highcharts框架

前言

Highcharts概述

一、安装

二、Highcharts 图表组成

三、生成一个 Highcharts

四、实例

1. 金字塔图（3D）

2. 饼图（3D）

3. 柱图（3D）

4. 面积图（3D）

5. 圆柱图（3D）

6. 散点图（3D）

7. 堆叠柱图（3D）

五、常用配置项

1.去掉右下角官方logo

2.去掉右上角导出

3.图例在图表中上方显示

4.设置导出信息为中文

5.去掉背景网格线

6.文字倾斜

7.数据直接显示在柱体上

8.设置柱体的宽度

9.设置背景网格线颜色、宽度

10.折现图线条设置平滑

11.去掉饼图外部文字带白边

12.饼图字体颜色跟饼图颜色一致

一文带你快速上手Highcharts框架相关推荐

最新文章

热门文章

一文带你快速上手Highcharts框架

前言

Highcharts概述

一、安装

二、Highcharts 图表组成

三、生成一个 Highcharts

四、实例

1. 金字塔图（3D）

2. 饼图（3D）

3. 柱图（3D）

4. 面积图（3D）

5. 圆柱图（3D）

6. 散点图 （3D）

7. 堆叠柱图 （3D）

五、常用配置项

1.去掉右下角官方logo

2.去掉右上角导出

3.图例在图表中上方显示

4.设置导出信息为中文

5.去掉背景网格线

6.文字倾斜

7.数据直接显示在柱体上

8.设置柱体的宽度

9.设置背景网格线颜色、宽度

10.折现图线条设置平滑

11.去掉饼图外部文字带白边

12.饼图字体颜色跟饼图颜色一致

一文带你快速上手Highcharts框架相关推荐

最新文章

热门文章

6. 散点图（3D）

7. 堆叠柱图（3D）