हाईचार्ट्स में कोई डेटा उपलब्ध संदेश कैसे दिखाएं

Question

क्या हम हाईचार्ट्स का उपयोग करके एक संदेश दिखा सकते हैं। जब डेटा उपलब्ध नहीं है? हमें एक संदेश दिखाना है उदाहरण: No Data Available। यदि हमारे पास डेटा छिपा है: No Data Available संदेश। Highcharts में गतिशील

Highcharts.chart('container', { 

    chart: { 

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

    }, 
}); 

Answer 1

आप Highcharts Chart Renderer

उपयोग कर सकते हैं यहाँ 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

में एक उदाहरण अपने पृष्ठ में डेटा-रहित करने वाली display.js फ़ाइल शामिल है। यह हाईचार्ट्स के साथ बंडल आता है। आप इसे अन्यथा यहां प्राप्त कर सकते हैं अन्यथा: https://code.highcharts.com/modules/no-data-to-display.js

डिफ़ॉल्ट संदेश "प्रदर्शित करने के लिए कोई डेटा नहीं है"। आप इसे संशोधित करना चाहते हैं, तो आप ऐसा कर सकते हैं:

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

Answer 3

अपनी टिप्पणी के आधार पर (अगर हम डेटा है कि हम अभी भी कोई डेटा उपलब्ध नहीं संदेश हां, तो हम Highcharts में छिपा कर सकते हैं दिखा डेटा है)। मुझे लगता है कि आप फस्टकी के समाधान का उपयोग कर रहे हैं और नो-डेटा-टू-डिस्प्ले.जेएस मॉड्यूल का उपयोग नहीं करना चाहते हैं। हां, जैसा कि बताया गया है, आप अभी भी एक ही कोड का उपयोग करके इसे संशोधित कर सकते हैं। मैं इस फ़ंक्शन संदेश के आधार पर श्रृंखला खाली है या नहीं, यह जांचने के लिए निरंतर फ़ंक्शन के अंदर स्थिति जोड़ता हूं।

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>

इस आशा:

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 डेमो

Answer 4

इन अन्य उत्तर के कुछ पागल तरह का लग ... यहाँ एक सुपर बुनियादी समाधान मैं साझा करने के लिए चाहता था किसी को मदद करता है