2017-02-17 11 views
12

하이 차트를 사용하여 메시지를 표시 할 수 있습니까? 데이터를 사용할 수없는 경우? 우리는 메시지 예 : No Data Available을 보여 주어야합니다. 우리가 데이터를 가지고 있다면 : No Data Available 메시지. highcharts 동적표시 방법 없음 데이터 없음 highcharts의 메시지

Highcharts.chart('container', { 

    chart: { 

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

    }, 
}); 
+0

그래. 하이 차트를 작성하지 말고 "No Data Available"이라는 텍스트를 삽입하십시오. 코드가 없으면 가장 도움이 될 것입니다. – George

+0

예보기 ... http : //jsfiddle.net/gh/get/jquery/2/highcharts/highcharts/tree/master/samples/highcharts/no-data-to-display/no-data-pie/ –

+0

수 있습니다. 우리는 폰트 크기를 늘리고 no-data-to-display-js 파일을 추가해야합니다. – Kondal

답변

6

당신은 여기

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(); 

}); 
9

JSFiddle의 예는 페이지에는 데이터 - 투 - display.js 파일을 포함하지의 Highcharts Chart Renderer

사용할 수 있습니다. 하이 차트가 번들로 제공됩니다. 그렇지 않으면 여기에서 얻을 수 있습니다. https://code.highcharts.com/modules/no-data-to-display.js

기본 메시지는 "표시 할 데이터 없음"입니다. 당신이 그것을 수정하려는 경우, 당신은이 작업을 수행 할 수 있습니다

귀하의 의견을 바탕으로
Highcharts.setOptions({ 
    lang: { 
     noData: 'Personalized no data message' 
    } 
}); 
6

(우리는 데이터이있는 경우 우리는 계속 사용할 메시지 그래서, 우리는 highcharts에 숨길 수있는 데이터를 보여주는 데이터가있는 경우). 제 생각에는 fustaki의 솔루션을 사용하고 있고 no-data-to-display.js 모듈을 사용하고 싶지 않습니다. 네, 언급 한 바와 같은 문제가 있습니다. 당신은 여전히이 코드를 수정할 수 있습니다. 즉,이 함수는 연속 함수 내에서 조건을 추가하여이 렌더링 메시지에 따라 계열이 비어 있는지 확인합니다.

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 데모

1

이 다른 답변 중 일부는 가지 미친 것 같다 ... 여기에 내가 공유하기를 원해요 슈퍼 염기성 용액입니다 도움이 누군가

+1

을 실패한 예제를 실황 예제와 차별화하여 게시물이 https://stackoverflow.com/a/42297065/8632727과 다른 점을 추가하십시오. 미친 것 같아. – Patata