Highcharts插件常用配置

一、参数部分：

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']
                ]
            }
        }],

柱状图示例：

1. 引入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>

2. 配置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-formatting
            shared: 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
        }
    });

2. 引入的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>