2014-05-13 2 views
2

내 차트는 실제 막대에 데이터 레이블이 있어야하는 스택 막대 차트입니다.하이 차트 : phantomjs 내보내기 이미지에 레이블이 없습니다.

브라우저 버전은 데이터 레이블을 적절히 사용하여 완벽하게 작동하지만 내 보낸 이미지에는 해당 이미지가 없습니다.

{ 
    colors: ['#0EAC55','#91C855','#F3BA0E','#F39595','#F30E0E'], 
     chart: { 
       type: 'bar', 
       height: 195 
      }, 
      credits: { 
      enabled: false 
      }, 
      title: { 
       text: '' 
      }, 
      xAxis: { 
       categories: ['Category 1', 'Category 2', 'Category 3'], 
      }, 
      tooltip: { 
       valueSuffix: '%' 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: '' 
       }, 
       max: 100, 
       opposite: true, 
      }, 
      legend: { 
       backgroundColor: '#FFFFFF' 
      }, 

      plotOptions: { 
       series: { 
        stacking: 'percent', 
        groupPadding: 0, 
        dataLabels: { 
        enabled: true, 
        color: '#000000' 

        } 
       } 
      }, 
       series: [{"name":"5","legendIndex":5,"data":[41.1,44.2,60.2]},{"name":"4","legendIndex":4,"data":[42.9,38.4,25.2]},{"name":"3","legendIndex":3,"data":[12.2,12,8.8]},{"name":"2","legendIndex":2,"data":[3.3,5,3]},{"name":"1","legendIndex":1,"data":[1,1,3.3]}] 
    } 

이러한 서버 측에서 생성 할 필요가 나는 이미지를 생성하는 phantomjs 서버를 사용하고 있습니다 :

여기 내 코드입니다. http://www.highcharts.com/component/content/article/2-articles/news/56-improved-image-export-with-phantomjs/

+0

내 편이 좋다 http://jsfiddle.net/huAuh/ ... 우리를 위해 바이올린을 만들 수 있습니까? – Mike

+0

실제로 코드를 사용하여 바이올린을 만들었고, 여전히 내 편이되었습니다. http://jsfiddle.net/huAuh/1/ .. JPEG로 다운로드하고 술집에서 lables를 볼 수 있습니다. – Mike

+0

게시물 제목에서 언급했듯이, phantomjs 서버를 사용하여 차트를 내보내고 있습니다. 브라우저에서 차트가 올바르게 표시됩니다. 내 차트는 브라우저가 없어도 자동으로 생성됩니다. js fiddle에서 코드를 가져 와서 phantomjs 서버로 전달했습니다.이 코드는 다음과 같이 생성되었습니다. http://s28.postimg.org/nzz2h7vu5/bar.png – Ash

답변

0

모든 애니메이션을 비활성화하고 오래된 애니메이션이 아닌 최신 내보내기 서버가 있는지 확인하십시오.

또한 defer 옵션을 false로 설정하십시오.

0

Pawel Fus가 제공 한 답변을 확대하면 애니메이션을 false로 설정하면 차이가 있지만 전체 레벨 (예 : chart.animation = false)이 아니라는 것을 확인하면 chart.plotOptions.series.animation = false에 설정해야합니다.

1

나는 동일한 문제가있었습니다. 나는 위의 모든 옵션을 시도했다. 모든 animation 옵션을 false으로 설정하고 defer 옵션을 false으로 설정하면 문제를 해결하는 데 도움이되지 않습니다.

마지막으로 github.com에서 문제가 발견되었습니다. 그리고 그것은 HighCharts의 버그였습니다. 나는 4.0.1 버전의 Highcharts을 사용하고있었습니다.

위의 제안 사항이 작동하지 않으면 해결 방법은 하이 차트 파일을 최신 버전으로 업데이트하는 것입니다.

내 샘플 코드는 jsfiddle에서 찾을 수 있습니다.

관련 문제