json get要求からデータを読み込むときにc3jsをPDFにエクスポートするにはどうすればいいですか？

Question

私は私のプロジェクトの一つにdashaboardの統計に取り組んでいる、と私は私のダッシュボードにチャートを追加するC3jsを使用していて、すべてのそれは正常に動作し、

が、私は使用してこのダッシュボードのPDFファイルを生成したいときRotativa Pluginとwkhtmltopdfは正しく動作しませんが、データを含むpdfを生成しますが、グラフは表示しません。

これはJsonを使用している場合にのみ発生しますが、データを直接挿入すると正常に動作します。

コンファレンスアプリケーション：

サーバー側：ASP.Net MVC5

クライアント側：Javascriptを、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); 
    } 
} 

ビュー：

しかし、私は印刷アクションを実行するとき、それはチャートなしsamply空白です：

<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> 
} 

は、Webページ（インデックスアクション）でレンダリングします。

アップデート私はまた別の方法ではなく、成功せずに問題を解決しようとしている

：私はせずにチャートを描画した後、私はシンプルなAJAXリクエストでデータを盗ん を、変数にデータを保存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

それは、これらのいずれかであるかもしれない：

1. JavaScriptのデフォルトの実行タイムアウトが200にデフォルトで設定やデータかもしれないと、あなたの 要求されます時間がかかります。

2. サーバーには、クロスオリジン・リクエストをサポートしていない、wkhtmltopdfは、ファイルシステムから AJAXリクエストを実行しますので、あなたのサーバがない サポートCORSをした場合、それは単なるデータの着信要求をブロックします。（1）については

   • ：増加する方法を文書で確認してください

   • C3JSは、単にこれらは私がしようとするだろうものですwkhtmltopdfのレンダリングエンジンに

を動作しません。この番号

（2）の場合：Rotativa GitHubのページでこの問題を確認してください：https://github.com/webgio/Rotativa/issues/79#issuecomment-75938649

（3）の場合：この問題をデバッグし、これは、単にc3への呼び出しを取り除き、サーバから返されたデータを簡単に出力します（あなた自身のAJAX呼び出しを行う必要があります）。データが表示されたら、C3にコールを追加します。グラフが表示されない場合は、C3がレンダリングエンジン（wkhtmltopdf）と何らかの非互換性を持つことを意味します。