highcharts图表数据是空数组时显示提示文字

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42750608/article/details/83109522

1.相关插件(本节最主要插件是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>

2.html

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

3.正式js代码
 

 //创建渐变色
    Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
        return {
            radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
            ]
        };
    });
    // 构建图表
    var chart1 = Highcharts.chart('container1',{
        title: {
            text: '寿命达到率分析'
        },
        credits: {//去掉右下角水印链接
            enabled: false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        legend: {
            //layout: 'vertical',   //图例布局:竖直方向排列
            backgroundColor: '#fff',  //图例背景颜色
            borderRadius: '50',   //图例背景边框圆角
            maxHeight: 200,     // 最大高度
            lineHeight: 200,    // 行高
            padding: 0,      //内边距
            itemMarginTop: 10,    //图例每行举上高度
            squareSymbol: true,
            x: 0,          //x,y设置图例位置
            y: 0,
            align: 'left',   //居左显示  
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    },
                    connectorColor: 'silver'
                }
            }
        },
        series: [{
            showInLegend : false,//是否显示图例
            type: 'pie',
            name: '图表1',
            data: data1
        }],
        //从这里开始是没有数据提示相关代码
        lang: {
            noData: "没有数据哦!"
        },
        noData: {
            style: {
                fontWeight: 'bold',
                fontSize: '15px',
                color: '#303030'
            }
        }
    });

 

展开阅读全文

没有更多推荐了,返回首页