json get 요청에서 데이터를로드 할 때 c3js를 PDF로 내보내는 방법은 무엇입니까?

Question

나는 내 프로젝트 중 하나에 dashaboard 통계에 일하고 있어요, 그리고 나는 C3js 내 대시 보드에 차트를 추가 사용하고, 모든 것이 잘 작동

을하지만 난이 대시 보드의 PDF를 사용하여 생성 싶어 할 때 Rotativa 플러그인 및 wkhtmltopdf,하지만 제대로 작동하지 않습니다, 그것은 데이터가 있지만 차트를 보여주는 PDF를 생성합니다.

이것은 Json을 사용하는 경우에만 발생하지만 데이터를 직접 삽입하면 정상적으로 작동합니다.

컨퍼런스 응용 프로그램 :

서버 측 : ASP.Net MVC5

클라이언트 측 : 자바 스크립트, Rotativa, C3js

Exemple

컨트롤러 :

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult Print() 
    { 
     return new ViewAsPdf("Index"); 
    } 

    public JsonResult Data() 
    { 
     var d1 = new ArrayList() { "Data1", 1, 4, 7, 8, 10 }; 
     return Json(d1 , JsonRequestBehavior.AllowGet); 
    } 
} 

보기 :

<div id="chart" style="width:500px;height:300px"></div> 
@section scripts{ 
<script> 
    var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
    url: "http://localhost:58762/Home/Data", 
    mimeType: 'json', 
    type: 'bar', 
} 
}); 
</script> 
} 

웹 페이지 (색인 작업)에 렌더링 : 나는 인쇄 작업을 실행할 때, 그것은 차트없이 samply 빈의

하지만.

업데이트 나는 또한 다른 방법으로하지만 성공하지 않고 문제를 해결하기 위해 노력하고있어

: 나는하지 않고 차트를 그릴 후, 나는 간단한 아약스 요청과 데이터를 retreive 과 변수에 데이터를 저장 c3 차트 함수에 ajax 호출. html 렌더링은 절대적으로 좋지만 pdf 인쇄가 작동하지 않습니다. 내 파일 울부 짖는 소리가 :

<div id="chart" style="width:500px;height:300px">Example 1</div> 
@section scripts{ 
<script> 
    dataT= $.ajax({ 
     method:'GET', 
     url: 'http://localhost:58762/Home/Data', 
     context: document.body, 
     global: false, 
     async: false, 
     success: function (result) { 
      return result; 
     } 

    }).responseJSON; 
    datad = [ 
    ['data1', 30, 200, 100, 400, 150, 250], 
    ['data2', 130, 100, 140, 200, 150, 50] 
    ]; 
    console.log('Datad: ' + datad); 
    console.log('DateT: ' + dataT); 
    var chart = c3.generate({ 
     data: { 
      columns: dataT, 
      type: 'bar' 
      }, 
      bar: { 
       width: { 
       ratio: 0.5 
       } 
      } 
}); 
</script> 

가}

Answer 1

많은 문제를 해결하고 많은 주제를 살펴본 후 wkhtmltopdf가 Ajax 호출 URL을 해결할 수 없다는 결론을 얻었으므로 생각대로 변경하고 컨트롤러의 모든 데이터를 전달했습니다. 모든 것이 샤프처럼 작동합니다.

이

내 솔루션입니다 :

보기 & 스크립트 :

@{ 
ViewBag.Title = "Home Page"; 
} 

<div id="chart" style="width:500px;height:300px">Lorem Ipsum</div> 

@section scripts{ 

<script> 
var infos = @Html.Raw(Json.Encode(ViewBag.data)); 
var chart = c3.generate({ 
data: { 
    columns:infos, 
     mimeType: 'json', 

     type: 'bar' 
    }, 
    bar: { 
    width: { 
     ratio: 0.5 
     } 

    } 
}); 


</script> 

} 

컨트롤러 :

public ActionResult Print() 
    { 
     var data = Data().Data; 
     ViewBag.data = data; 
     return new ViewAsPdf("Index"); 
    } 

    public JsonResult Data() 
    { 
     var d1 = new ArrayList() { "data1", 30, 200, 100, 400, 150, 250 }; 
     var d2 = new ArrayList() { "data2", 130, 100, 140, 200, 150, 50 }; 
     var d = new ArrayList() { d1, d2 }; 
     return Json(d, JsonRequestBehavior.AllowGet); 
    } 

결과 :

Answer 2

그것은 이들의 수 있습니다 : 데이터에 대한 자바 스크립트 기본 실행 타임 아웃이 200 기본적으로 설정되어

1. 하고 요청을 수도 오래 걸릴 수 있습니다. 서버가 크로스 원산지 요청을 지원하지 않습니다

2. 는 wkhtmltopdf은 파일 시스템에서 Ajax 요청을 실행되므로 서버가없는 지원 CORS를 않는 경우 그것은 단지 데이터에 대한 수신 요청을 차단합니다.

3. C3JS 단순히

이 내가 시도 할 것 것들 wkhtmltopdf의 렌더링 엔진에서 작동하지 않습니다

: 어떻게 증가하는 문서에서 확인하십시오 (1)의 경우

• 가 이 숫자는
• (2) : Rotativa GitHub 페이지에서 확인하십시오. https://github.com/webgio/Rotativa/issues/79#issuecomment-75938649
• (3) :이 문제를 디버그하고 이 경우 c3에 대한 호출을 제거하고 서버에서 반환 한 데이터를 간단하게 인쇄합니다 (아마도 자신의 AJAX 호출을 만들어야 할 것입니다). 데이터가 표시되면 C3에 통화를 추가하십시오. 차트가 표시되지 않으면 C3에 렌더링 엔진 (wkhtmltopdf)과 일종의 비호 환성이 있음을 의미합니다.