highcharts图表数据为空数组时进行文字提示

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数组为空时,进行下面的属性设置,进行提示结束*/

    });

}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值