使用highchart无数据时的样式

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

当使用highchart图表插件时，如果服务器返回的数据为空，那么在页面上就会显示一大块没有内容的空白，显得很难看，因此需要寻找解决方案，起码也得显示一条无数据的提示吧？

方法一：

返回数据为空时，直接return，不去执行highcharts方法，然后在相应位置添加提示。

方法二：

在highchart图表内部显示无数据的提示文字

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

[html] view plain copy

1. <script src="http://code.highcharts.com/highcharts.js"></script>  
2. <script src="http://github.highcharts.com/master/modules/no-data-to-display.src.js"></script>  
3. <script src="http://code.highcharts.com/modules/exporting.js"></script>  
4.   
5. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
6. <button id="add">Add data</button>  
7. <button id="remove">Remove data</button>  
8. <button id="showCustom">Show custom message manually</button>  

[javascript] view plain copy

1. /* 
2.     Demonstrate no-data-to-display plugin.  
3.      
4.     The plugin will automatically display a customizable message when there is no data visible in the chart.  
5.     It can alternatively be displayed/hidden at any time manually, optionally with custom text. There is also  
6.     a new function "hasData()" for charts and series, returning true if there is data visible in the plot area.  
7. */  
8.   
9. $(function () {  
10.   
11.     var chart,  
12.         btnRemove = $('#remove'),  
13.         btnAdd = $('#add'),  
14.         btnShow = $('#showCustom');  
15.   
16.     btnAdd.click(function () {                        
17.         chart.series[0].addPoint(Math.floor(Math.random() * 10 + 1));   
18.     });  
19.   
20.     btnRemove.click(function () {       
21.         if(chart.series[0].points[0]) {  
22.             chart.series[0].points[0].remove();  
23.         }  
24.     });  
25.   
26.     // Show a custom message  
27.     btnShow.click(function () {  
28.         if(!chart.hasData()) {  // Only if there is no data  
29.             chart.hideNoData(); // Hide old message  
30.             chart.showNoData("Your custom error message");  
31.         }  
32.     });  
33.   
34.     $('#container').highcharts({  
35.         title: {  
36.             text: 'No data in line chart - with custom options'  
37.         },  
38.         series: [{  
39.             type: 'line',  
40.             name: 'Random data',    
41.             data: []       
42.         }],              
43.         lang: {  
44.             // Custom language option              
45.             //noData: "Nichts zu anzeigen"      
46.         },  
47.         /* Custom options */  
48.         noData: {  
49.             // Custom positioning/aligning options  
50.             position: {   
51.                 //align: 'right',  
52.                 //verticalAlign: 'bottom'  
53.             },  
54.             // Custom svg attributes  
55.             attr: {  
56.                 //'stroke-width': 1,  
57.                 //stroke: '#cccccc'  
58.             },  
59.             // Custom css  
60.             style: {                      
61.                 //fontWeight: 'bold',       
62.                 //fontSize: '15px',  
63.                 //color: '#202030'          
64.             }  
65.         }  
66.     });  
67.   
68.     chart = $('#container').highcharts();  
69. });  
70.       

显示效果如图所示：

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