Làm thế nào để hiển thị Thông báo Không có Dữ liệu trong highcharts

Question

Chúng tôi có thể hiển thị thông báo bằng highcharts không. Khi dữ liệu không có sẵn? chúng tôi phải hiển thị thông báo Ví dụ: No Data Available. Nếu chúng tôi có ẩn dữ liệu: No Data Available thư. trong highcharts động

Highcharts.chart('container', { 

    chart: { 

    type: 'bubble', 
    plotBorderWidth: 0, 
    zoomType: 'xy' 

    }, 
}); 

Answer 1

Bạn có thể sử dụng Highcharts Chart Renderer

Dưới đây là một ví dụ trong JSFiddle

var chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    series: [] 

}, function(chart) { // on complete 

    chart.renderer.text('No Data Available', 140, 120) 
     .css({ 
      color: '#4572A7', 
      fontSize: '16px' 
     }) 
     .add(); 

}); 

Answer 2

Bao gồm không có dữ liệu-to-display.js tập tin trong trang của bạn. Nó đi kèm với highcharts. Bạn có thể tải tại đây nếu không: https://code.highcharts.com/modules/no-data-to-display.js

Thông báo mặc định là "Không có dữ liệu để hiển thị". Nếu bạn muốn thay đổi nó, bạn có thể làm điều này:

Highcharts.setOptions({ 
    lang: { 
     noData: 'Personalized no data message' 
    } 
}); 

Answer 3

Dựa trên nhận xét của bạn (nếu chúng ta có dữ liệu vẫn hiển thị không có dữ liệu thông điệp có sẵn như vậy, chúng ta có thể trốn trong highcharts nếu chúng ta có dữ liệu). Tôi nghĩ bạn đang sử dụng giải pháp của fustaki và không muốn sử dụng mô-đun no-data-to-display.js. Bạn vẫn có thể sử dụng cùng một mã bằng cách sửa đổi nó, tức là thêm điều kiện bên trong hàm liên tục để kiểm tra xem chuỗi có rỗng hay không, dựa trên thông báo kết xuất này.

var chart = new Highcharts.Chart({ 

chart: { 
    renderTo: 'container' 
    }, 

    xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    series: [] 

}, function(chart) { // on complete 
    if (chart.series.length < 1) { // check series is empty 
    chart.renderer.text('No Data Available', 140, 120) 
     .css({ 
     color: '#4572A7', 
     fontSize: '16px' 
     }) 
     .add(); 
    } 
}); 

Fiddle bản demo

Answer 4

Một số trong những câu trả lời khác dường như phát điên ... đây là một giải pháp cơ bản siêu tôi muốn chia sẻ:

Highcharts.setOptions({lang: {noData: "Your custom message"}}) 
 
var chart = Highcharts.chart('container', { 
 
    series: [{ 
 
     data: [] 
 
    }] 
 
});

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script> 
 

 
<div id="container" style="height: 250px"></div>

Hy vọng điều này giúp ai đó