使用highchart无数据时的样式

url:http://blog.csdn.net/zk437092645/article/details/12065125

当使用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/