highcharts简易使用

最新推荐文章于 2025-08-18 21:47:34 发布

原创最新推荐文章于 2025-08-18 21:47:34 发布 · 置顶 · 1.4k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#插件

记录同时被 2 个专栏收录

11 篇文章

订阅专栏

插件

1 篇文章

订阅专栏

本文档简要介绍了如何使用Highcharts插件创建基础柱状图，包括设置图表类型、颜色、轴参数、图例和数据提示框等关键属性。通过示例代码解析，帮助初学者理解Highcharts的使用。

首先声明，此文档仅针对highcharts的最基础的介绍，仅介绍单条柱状图及其样式说明，如果想要更加深入的了解highcharts插件的使用以及具体参数配置请参考highcharts官网教程以供学习（官方说明文档：http://www.hcharts.cn/docs
、官方在线演示：http://www.hcharts.cn/demo/highcharts）；

首先借用官方API的图来说明highcharts的几个主要的参数属性，highcharts的主体参数也是围绕着这几个参数进行配置与修改。
这里写图片描述
首先先说明一下最基本的highcharts的使用，首先登陆highcharts的中文官网(http://www.hcharts.cn/)，然后点击上方的产平中心→highcharts，进入下载中心点击下载

Highcharts是个开源插件，所以可以直接下载。

解压后是这样的
这里写图片描述
因为下载包自带API所以我一般是将code文件夹重命名后放入工程

然后需要使用highcharts的页面或者总js调用的页面插入一下两行代码即可：

<script type="text/javascript" src="${basepath}/static/public/highcharts/highcharts.js"></script>

<script type="text/javascript" src="${basepath}/static/js/highcharts.config.js "></script>

注意，一般单独插入页面的时候也需要注意，重点是如果插入的是综合js调用页面的话需要将插入语句写在最后，以免出现缺少jq库之类的问题。
然后接下来就是开始初始化highcharts插件了。
初始化的语句还是比较简单的：

<div id="demo"></div>

$('#demo').highcharts(datas);

在页面元素设置好id，然后在js中获取id将设置好的data数据通过highcharts方法放入即可。接下来的重点就是如何设置“datas”的参数。
让我们回到第一张图：
这里写图片描述
这些属性都是js中所有的，对应每一个参数，具体看接下来的代码详解，我们就以一个简单项目中的实例来作为例子

这是一个简易的柱状图，鼠标悬停会有一个显示具体数目和名称的悬浮框，这张图用到的主要参数有
chart:{…},
colors:{…},
title:{…},
xAxis:{…},
yAxis:{…},
lengend:{…},
tooltip:{…},
plotOptions:{…},
series:{…}
那我们来一个一个先解释这些主要参数的功能以及源码分析

chart:{…} 这是必要参数，一般是负责图表和图形区的通用参数，相当于设置你需要什么样的图表或者是图形，highcharts支持的不仅仅只有柱状图，还有很多种不同风格图表，通过这个参数你可以设置你想要的最基本的图形框架

chart: {
   type: 'column',
   // height: 450,
   margin: [ 50, 50, 50, 80]
},

这是源码，其中，type属性代表图表类型，这里我们选择柱状图“column”。其他图形还请参考中文API(http://api.hcharts.cn/)
这里写图片描述
然后是margin属性，一般有点基础前端知识的人会知道，这是边距调成属性，这个属性是当你需要x轴和y轴的注解的时候是必要的，我们可以演示一下去除这个参数的样式

如果需要边框距那就加上这个参数吧。

title:{…}

title: {
   text: 'highcharts演示'
},

标题参数，这是一个必要参数，但如果没有特别的样式要求的话在text中写入你所需要的标题即可。
副标题也是一样，只是副标题并不是必要参数，可以不写。
这里写图片描述

colors：{…}

colors:['#02c39c','#cadaf2','#00e5ef','#ff4b59'],

控制图表或图形序列展示的颜色，根据所配颜色进行轮转，第几个序列就用第几个颜色，超过配置的序列长度会回到第一个重新开始轮转

xAxis:{…}

xAxis:{
   categories:['条目一','条目二','条目三','条目四'],
   labels: {
      align: 'right',
      style: {
         fontSize: '13px',
         fontFamily: 'Verdana, sans-serif'
      }
   }
},

这是x轴的参数，一般用来设置x轴的属性，这里不仅设置下方图例，还可以设施图表中的轴效果。
categories属性是用来设置x轴的类别名称，所有的名称可以以数组的方式写入，注意，如果数据长度超过命名长度，highcharts会自动以角标最为参数（从0开始）;
labels属性是设置轴标签样式,align属性是用来设置便签对齐（同css样式），style是设置风格，里面的属性分别是字体大小和字体样式;
这里要说明一点：highcharts的样式属性是和页面的样式属性一样的，想要改样式就是在适合的参数里放上适合的属性

yAxis:{…}

yAxis: {
   title: {
      text: '任务数量'
   }
},

y轴和x轴实际上是一样的，只是一般用在图表上的时候y轴大多只有一个说明标签，所以写法可以参考title标签。

legend：{…}

legend: {
   enabled: false
},

这是图例参数，
enabled，控制图例是否开关，这里是关闭图例;
因为这张图表并没有用到图例，所以我去官网找了图例的样式

legend: {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'top',
   x: -40,
   y: 100,
   floating: true,
   borderWidth: 1,
   backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
   shadow: true
},

源码
这里写图片描述
效果
layout:控制图例样式，具体参数需要参考API;
align:控制图例水平对齐“left”，“center”，“right”分别是左中右;
verticalAlign：控制图例垂直对齐“top”，“middle”，“bottom“分别是上中下;
x:
y:这两个是精细的定位图例的位置，以像素为单位;
floating:这是设置图例是否可以浮动在数据之上，默认是false，如果需要还是建议允许浮动;
borderWidth:设置图例容器的边框厚度，以数字为属性参数，默认为0；
backgroundColor:设置图例容器的背景颜色;

tooltip

tooltip: {
   pointFormat: '<b>{point.y}</b>',
},

这是数据提示框参数，就是当鼠标悬停在数据条或数据点上上方会显示出具体的数据和数据名（对应x轴标签）。
这里的pointFormat是显示该数据条或数据点的html代码，数据需要用{}包住，参数可直接用point.x, point.y, series.name and series.color和以相同的形式表示的其它属性，并允许扩展。

plotOptions:{…}

plotOptions: {
   series: {
      colorByPoint: true
   }
},

这个参数是用来改变图表或图形各个系列的样式，因为highcharts支持多层数据展示，这个参数是可以修改单个系列的图表样式。
series是指通用样式调整，也可以理解为序列调整;
colorByPoint:控制颜色轮转，默认是false，配合之前的colors参数可以修改单层序列图表颜色。官方文档并没有标出这个参数，不知道是什么原因，但既然游泳那我就把它标出来;

series:{…}

series: [{
   name:'highcharts演示',
   data:[10,10,10,10],
   dataLabels: {
      enabled: true,
      color: '#000000',
      style: {
         fontSize: '13px',
         fontFamily: 'Verdana, sans-serif',
         textShadow: '0 0 3px white'
      }
   }
}]

这个参数翻译过来是“通用参数“,但这是真正控制图表或图形的参数，（话说highcharts官网上这么重要的参数都不翻译的喽！？？？）
name:这个参数是说明名称，可写可不写，默认null;
data:这就是图表需要显示的参数，一般是用数组放入，官方给的类型是这样的Array<Object|Array|Number>;
dataLabels:这是设置图标上是否需要显示参数以及样式;
在series参数中真正牵扯到序列（series）的问题，之前也说过，highcharts是可以使用多组数据，每一组数据显示在前端就是一组数据，如果想要对某一组数据进行样式或数据的调整要注意所添加的参数是针对全局还是单个序列，只要清楚了这一点，配合上官方API，那么恭喜你，你已经算是学会如何使用这个酷炫简单的图表插件了。
如果对自己的技术不够自信，或者迫不及待想要试试这个插件，那么可以去到官网在线的代码演示页面（http://code.hcharts.cn/new）来试试自己写一个图表吧。