使用highchart無數據時的樣式

當使用highchart圖表插件時，如果服務器返回的數據爲空，那麼在頁面上就會顯示一大塊沒有內容的空白，顯得很難看，因此需要尋找解決方案，起碼也得顯示一條無數據的提示吧？

方法一：

返回數據爲空時，直接return，不去執行highcharts方法，然後在相應位置添加提示。

方法二：

在highchart圖表內部顯示無數據的提示文字

方法二在GOOGLE上找到了答案。

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/master/modules/no-data-to-display.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id="add">Add data</button>
<button id="remove">Remove data</button>
<button id="showCustom">Show custom message manually</button>

/*
    Demonstrate no-data-to-display plugin. 
    
    The plugin will automatically display a customizable message when there is no data visible in the chart. 
    It can alternatively be displayed/hidden at any time manually, optionally with custom text. There is also 
    a new function "hasData()" for charts and series, returning true if there is data visible in the plot area. 
*/

$(function () {

    var chart,
        btnRemove = $('#remove'),
        btnAdd = $('#add'),
        btnShow = $('#showCustom');

    btnAdd.click(function () {                      
        chart.series[0].addPoint(Math.floor(Math.random() * 10 + 1)); 
    });

    btnRemove.click(function () {     
        if(chart.series[0].points[0]) {
            chart.series[0].points[0].remove();
        }
    });

    // Show a custom message
    btnShow.click(function () {
        if(!chart.hasData()) {  // Only if there is no data
            chart.hideNoData(); // Hide old message
            chart.showNoData("Your custom error message");
        }
    });

    $('#container').highcharts({
        title: {
            text: 'No data in line chart - with custom options'
        },
        series: [{
            type: 'line',
            name: 'Random data',  
            data: []     
        }],            
        lang: {
            // Custom language option            
            //noData: "Nichts zu anzeigen"    
        },
        /* Custom options */
        noData: {
            // Custom positioning/aligning options
            position: {	
                //align: 'right',
                //verticalAlign: 'bottom'
            },
            // Custom svg attributes
            attr: {
                //'stroke-width': 1,
                //stroke: '#cccccc'
            },
            // Custom css
            style: {                    
                //fontWeight: 'bold',     
                //fontSize: '15px',
                //color: '#202030'        
            }
        }
    });

    chart = $('#container').highcharts();
});
    

顯示效果如圖所示：

文章代碼引自 http://jsfiddle.net/highcharts/hxGmq/