Clever Geek Handbook

highcharts.jsを使用して、サーバー側でグラフを作成します

サーバー上のハイチャート

今日は、サーバー側のhighcharts.jsチャートの使用についてお話します。 すべてのコードをC＃で記述しますが、JavaScriptをまったく使用しなくてもかまいません。 結果として、ディスクに保存したり、たとえばレターに添付したりできるグラフを含むファイルを取得します。



優れた無料の.netチャートライブラリの大まかな検索は失敗しました。 見つかったすべてのライブラリの中で最も優れたものはms-chartでしたが、更新プログラムと優れたドキュメントがないことから判断すると、Microsoft自身はずっと前にそれを放棄しました。



選択はhighcharts.jsで決まりました。これは、フロントエンドで広く使用されているチャート作成用の非常に柔軟なライブラリです。



その機能は、.net用のすべてのライブラリよりもはるかに優れています。 サーバーでhighcharts.jsを使用するための2つのオプションがあります。





phantom.jsはAzure Web Appで実行できないため（ 証明 ）、2番目のオプションが選択されました。 highchart-export-moduleを使用するには、サーバーを上げる必要があります（ 公式ガイドまたはこのブログを参照）が、面倒な場合はhighchart.jsサーバー（ http://export.highcharts.com/ ）を使用できます。



Highchart-export-moduleにはかなり単純なHTTP APIがあります。 .netから彼と通信するために、小さなライブラリhighcharts-export-clientが作成されました。 それを詳しく見てみましょう。



highcharts-export-client



ほとんどの.netライブラリと同様に、NuGetからインストールします。 



Install-Package highcharts-export-client


チャートを作成するには、次のコードを使用します。 



  var client = new HighchartsClient("http://export.highcharts.com/"); var options = new { xAxis = new { categories = new[] { "Jan", "Feb", "Mar" } }, series = new[] { new { data = new[] {29.9, 71.5, 106.4} } } }; var res = await client.GetChartImageFromOptionsAsync(JsonConvert.SerializeObject(options)); File.WriteAllBytes("image.png", res);


コードの結果は以下の画像に示されています。



基本チャート






チャートのデータは、ハイチャート設定の形式で送信できます。 これは、フロントエンドでハイチャートを使用し、設定をコピーするだけで、サーバー側でまったく同じグラフを取得する場合に便利です。 



  await client.GetChartImageFromOptionsAsync(your_highcharts_settings);


また、データはsvg形式で転送できます。 



  await client.GetChartImageFromSvgAsync(svg);


結果のファイルの品質とフォーマットは、HighchartsSettingオブジェクトをコンストラクターに渡すことで調整できます。 



  var settings = new HighchartsSetting { ExportImageType = "jpg", ImageWidth = 1500, ServerAddress = "http://export.highcharts.com/" }; var client = new HighchartsClient(settings);


png、jpg、pdf、およびsvg形式がサポートされています。 最大ファイル解像度は2000pxです-この制限はhighchart-export-moduleによって課せられます。



ライブラリのソースコードはGithub- highcharts-export-clientで入手できます 。



ご清聴ありがとうございました！



More articles:


All Articles