highcharts图表数据为空数组时,就会整个显示空白,所以在为空的时候想进行文字提示
一、前提条件:进行相关js的插件引用(最主要插件是no-data-to-display.js,没它就不会显示提示文字)
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
二、在图表数据封装js里面进行提示信息属性设置
function lineChartJs(){
var chart = Highcharts.chart('container', {
lang:{
contextButtonTitle:"图表导出菜单",
downloadJPEG:"下载JPEG图片",
downloadPDF:"下载PDF文件",
downloadPNG:"下载PNG文件",
downloadSVG:"下载SVG文件",
loading:"加载中",
noData:"没有数据",
printChart:"打印图表",
},
chart: {
type: 'areaspline'
},
credits:{
enabled:false // 禁用版权信息
},
title: {
text:"测试title",
style:{
color: '#696868',
fontSize: '16px',
fontFamily:'微软雅黑',
fontWeight:'bold',
},
margin:50,
y:25
},
xAxis: {
categories: [
'周一','周二','周三','周四','周五','周六','周日'
],
plotBands: [{ // 标识出周末
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: '访问量(次)'
},
plotLines: [{
value: 0,
width: 1,
color: '#8080800'
}]
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [],
/*series数组为空时,进行下面的属性设置,进行提示开始*/
lang: {
noData: "暂时没有数据哦!"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
}
/*series数组为空时,进行下面的属性设置,进行提示结束*/
});
}