一、参数部分：
- 1. chart: 图表配置
- 2. credits: 版权信息
- 3. exporting: 导出部分
- 4. legend: 图例
- 5. plotOptions: 数据列配置
- 6. series：数据列
- 7. subtitle：副标题
- 8. title：标题
- 9. tooltip：提示框
- 10. xAxis：x轴
- 11. yAxis：y轴
- 12. 渐变色
- 柱状图示例：
- 棒棒糖图示例

一、参数部分：

1. chart: 图表配置

backgroundColor : “#FFFFFF” (默认) 整个图表的背景颜色
borderColor : “#335cad” 边框颜色
type: “line” 图表类型，默认是line
spacingBottom：0 下内边距默认15

2. credits: 版权信息

enabled: true 版权信息是否启用，一般直接禁用了…
href: ‘http://www.hcharts.cn’ 连接
text: “…” 内容

3. exporting: 导出部分

enabled: true 导出功能是否启用

4. legend: 图例

enabled: true 是否启用
backgroundColor: 背景颜色
borderColor: 边框颜色
title: { //标题
text: 内容，
style: { 图例标题样式 }
}
x :水平偏移：负值时向左偏移，正值向右，默认是：0.
y: 竖直偏移：当 y 值为负值时，图例往上偏移；正值时，图例往下偏移。默认是：0

5. plotOptions: 数据列配置

下一层要跟图表类型对应：

bar: {条形图配置}
column：{柱状图配置}
pie：{饼图}
lollipop：{棒棒糖图}

再下一层的属性：bar示例

plotOptions:{bar: {color: '#fff',dataLabels: { //数据标签，图上显示具体数据enabled: true, // 启用allowOverlap: true,// 允许数据标签重叠style: {fontWeight: 'bold',fontSize: '11px',color: '#23f2ff',textOutline: '0px 0px contrast' // 阴影 默认是1px 1px contrast},y: -5, // y偏移x: 0// x偏移stacking: null //是否进行堆叠，参数值：{null,normal（普通堆叠）,percent（百分比堆叠）}}}
}

6. series：数据列

也是对应图表类型，放图表显示的基础数据值。

7. subtitle：副标题

不想要的话将text属性设置为null

style：文字样式
text：内容
x：水平偏移
y：垂直偏移

8. title：标题

同subtitle

9. tooltip：提示框

headerFormat: 标题格式化，（提示框中标题行的HTML代码。变量用花括号包起来。可用的变量有 point.key，series.name，series.color 以及point 和series对象的其他属性。坐标轴类型的不同，point.key变量类型可能为类别名称， x值或者日期字符串。对于日期类型的坐标轴，point.key的数据格式可以通过tooltip.xDateFormat来设置

Defaults to <span style="font-size: 10px">{point.key}</span><br/>）

footerFormat：尾部格式化字符串
pointFormat：对应数值显示格式化，见下面例子

10. xAxis：x轴

allowDecimal：是否允许小数，默认true
labels：轴标签

labels: {style:{whiteSpace:'nowrap',// 阻止文本换行textOverflow:'none',// 阻止文本过程以省略号显示color: '',//颜色cursor:'',//鼠标显示fontSize: '' //字体大小}
}

gridLineColor：网格线颜色
gridLineWidth：网格线宽度
lineColor：轴线颜色
lineColor：轴线宽度
max：最大值
min：最小值
title：坐标标题

title:{enabled: true,// 是否显示style: {//样式color：'#fff'},text: '',//标题内容x: 0,//水平偏移y: 0  // 竖直偏移
}

11. yAxis：y轴

allowDecimal：是否允许小数，默认true
labels：轴标签

labels: {style:{whiteSpace:'nowrap',// 阻止文本换行textOverflow:'none',// 阻止文本过程以省略号显示color: '',//颜色cursor:'',//鼠标显示fontSize: '' //字体大小}
}

gridLineColor：网格线颜色
gridLineWidth：网格线宽度
lineColor：轴线颜色
lineColor：轴线宽度
max：最大值
min：最小值
title：坐标标题

title:{enabled: true,// 是否显示style: {//样式color：'#fff'},text: '',//标题内容x: 0,//水平偏移y: 0  // 竖直偏移
}
* tickWidth：刻度线宽度
* tickColor：刻度线颜色

12. 渐变色

在series数据列中的color，写上如下：

series: [  {name: '运行率 %',data: [71,68,67,61,59,57,56,52,50,49],borderWidth: '0',color: {linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },stops: [[0, '#FB9E40'],[1, '#FC4747']]}}],

柱状图示例：

引入js

"/assets/module/Highcharts-8.1.2/code/highcharts.js"
"/assets/module/Highcharts-8.1.2/code/modules/oldie.js"
"/assets/module/Highcharts-8.1.2/code/modules/exporting.js"<div id="container"></div>

配置js

var chart = Highcharts.chart('container1', {chart: { // 图表配置 type: 'column',backgroundColor: "transparent", // 图表背景颜色spacingBottom: 0 // 下内边距},title: {text: null  // 标题配置，不需要设置为null},xAxis: {categories: ['车间1', '车间2', '车间3', '公用设施'],lineColor: '#0ce2ff',// 坐标线颜色gridLineColor: '#0ce2ff', // 网格线颜色labels: {style: {color: "#fff", // 坐标文字颜色fontSize: "13px"}}},yAxis: {min: 0,title: {text: null,style: {color: "#fff"}},lineColor: '#0ce2ff',gridLineColor: '#0ce2ff',labels: {style: {color: "#fff"}}},tooltip: {pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>' +'({point.percentage:.0f}%)<br/>',//:.0f 表示保留 0 位小数，详见教程：https://www.hcharts.cn/docs/basic-labels-string-formattingshared: true},plotOptions: {column: {stacking: 'percent' // 开启堆叠},series: {pointWidth: 30 // 柱宽}},series: [{name: '停机设备',data: [3, 2, 5, 0],color: '#8c8c8b'}, {name: '空闲设备',data: [5, 2, 8, 0],color: '#a9a53f'}, {name: '运行设备',data: [20, 11, 48, 3],color: '#267739'}, {name: '报警设备',data: [6, 2, 6, 0],color: '#982432'}, {name: '关机设备',data: [1,0,0,1],color: '#474848'}],credits :{enabled: false  // 版权设置 禁用},exporting: {enabled: false // 导出设置 禁用},legend: {enabled: false // 图例设置 禁用}});

效果：

棒棒糖图示例

Highcharts.chart('programDivColumn', {chart: {type: 'lollipop',backgroundColor: 'transparent'},accessibility: {point: {descriptionFormatter: function (point) {var ix = point.index + 1,x = point.name,y = point.y;return ix + '. ' + x + ', ' + y + '.';}}},plotOptions: {lollipop: {dataLabels: {enabled: true,allowOverlap: true,// 允许数据标签重叠style: {fontWeight: 'bold',fontSize: '12px',color: '#fff'},y: -5}}},legend: {enabled: false},title: {text: null},tooltip: {shared: true},xAxis: {type: 'category',style : {color :'#fff'},labels: {style: {color: "#fff"}}},yAxis: {title: {text: null,style : {color :'#fff'}},labels: {style: {color: "#fff"}}},series: [{name: '使用次数',data: [{name: 'Ox_010',low: 89,color: '#19ffec'}, {name: 'Ox_011',low: 79,color: '#19ffec'}, {name: 'Ox_210',low: 168,color: '#19ffec'}, {name: 'Ox_019',low: 83,color: '#19ffec'}, {name: 'Ox_059',low: 49,color: '#19ffec'}, {name: 'Ox_269',low: 99,color: '#19ffec'}]}],credits :{enabled: false},exporting: {enabled: false}});

引入的js

<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts-more.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/dumbbell.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/lollipop.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/accessibility.js"></script>

Highcharts插件常用配置相关推荐

MyBatis Plus分页插件常用配置
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 配置详情 MyBatis Plus分页插件常用配置如下: import com.baomido ...
大番茄插件常用配置
VassistX的简单介绍与下载安装简单介绍 VassistX的全称是Visual Assist X,是whole tomato开发的一个非常好用的插件,可用于VC6.0及Visual Studio ...
IDEA常用配置和常用插件及常用快捷键
欢迎转载,转载请注明出处! 知乎:迷人滴海嘉思否:迷人滴海嘉简书:迷人滴海嘉前言本人使用 IntelliJ IDEA 两年多了,觉得还是非常好用的.在使用过程中总结了个人的IDEA常用配置和常 ...
Clion~Clion常用配置和插件
一.常用配置 1. 字符编码 2. 主题 3. 字体 4. 显示行号缩进二.常用插件 File -> Settings -> Plugins Chinese(simplified)(汉化 ...
php swfupload handlers.js,SWFUpload 文件上传插件常用的配置讲解
上传文件swfUpload 插件: 基本的文件上传涉及到的四个文件 (还有一个处理数据的php文件这里没有涉及到) html页面: upload_window.html js文件: swfupl ...
【超级详细教程】IntelliJ IDEA 从入门到上瘾，常用配置、插件、多光标操作、快捷键。
本文共计 1.5 W 字,80 张图介绍 IDEA 中令人相见恨晚的技巧,本文中从入门.简单项目创建开始,介绍 IDEA 中多光标操作.常用配置.插件.版本控制等等.一定包含你在别的文章没有看到的内容 ...
vscode常用插件与配置
分享一下本人目前正在使用的一套超级舒服的Vs Code插件与配置(只有开发写代码时用的,没有摸鱼时用的),每一个插件的功能就不一一介绍了,直接上菜!!! 第一屏插件第二屏插件 settings.js ...
Maven pom.xml 全配置（二）不常用配置
Maven pom.xml 全配置(二)不常用配置这里贴出Maven pom.xml文件中使用率较少的配置参数,如果此篇文档中没有找到你想要的参数,移步Maven pom.xml 全配置(一)常用配 ...
Maven pom.xml 全配置（一）常用配置
Maven pom.xml 全配置(一)常用配置这里贴出一个Maven中出现频率较高的配置参数注释,方便理解项目中Maven的配置具体的作用.如果在此博文中没有找到你想看到的参数,可以移步Maven ...

Highcharts插件常用配置

目录

一、参数部分：

1. chart: 图表配置

2. credits: 版权信息

3. exporting: 导出部分

4. legend: 图例

5. plotOptions: 数据列配置

6. series：数据列

7. subtitle：副标题

8. title：标题

9. tooltip：提示框

10. xAxis：x轴

11. yAxis：y轴

12. 渐变色

柱状图示例：

棒棒糖图示例

Highcharts插件常用配置相关推荐

最新文章

热门文章