Используем highcharts.js для создания графиков на стороне сервера

Сегодня мы поговорим об использовании highcharts.js графиков на стороне сервера. Весь код будем писать на С#, обойдемся совсем без javascript. В результате получим файл с графиком, который можно будет сохранить на диск или например приложить к письму.

Беглый поиск хороших бесплатных .net библиотек для создания графиков не увенчался успехом. Лучшей из всех найденных библиотек была ms-chart, но судя по отсутствию обновлений и хорошей документации сама Microsoft ее давно забросила.

Выбор пал на highcharts.js — очень гибкая библиотека для построения графиков, которая широко применяется на фронтенде.

Ее возможности значительно превосходят все те библиотеки которые есть для .net. Существует два варианта использования highcharts.js на сервере:

• использовать phantom.js и обращаться к библиотеке через него
• использовать highchart-export-module

Был выбран второй вариант, так как phantom.js не возможно запустить в Azure Web App (proof). Для работы с 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);

Результат работы кода, представлен на изображении ниже.

Данные для графика можно передавать в виде настроек highcharts. Это удобно если вы используете highcharts на фронтенде, достаточно скопировать настройки и вы получите точно такой же график на стороне сервера.

    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.

Спасибо за внимание!

ссылка на оригинал статьи https://habrahabr.ru/post/279515/