Если вам понравилось прочитанное, не стесняйтесь связаться со мной на linkedin или следить за мной на dev.to 🙂
Сегодня будет еще одно краткое руководство о том, как вы можете отобразить график на адаптивной карточке для чат-бота. Это довольно просто, я хотел сделать это для своей серии статей о создании чат-бота для анализа настроений в Twitter, но не мог найти ничего об этом до сих пор.
Код можно посмотреть в репозитории по ссылке ниже:
- https://github.com/Albert-Bennett/TwitterSentimentAnalysisChatBot
Теперь перейдем к кодированию.
Введение
Как и в большинстве случаев, связанных с программированием, существует множество способов достижения этой цели, но все они включают в себя создание изображения графика и использование его в элементе AdaptiveImage для отображения изображения. Самый простой способ, который я нашел, это использовать API сторонних разработчиков для создания графика и отправки его обратно через запрос get.
Вот ссылка на документы для API: https://documentation.image-charts.com/.
А вот URL, который мы можем использовать для генерации графика:
https://image-charts.com/chart?cht=p3&chs=300×300&chd=t:{0}&chl={1}&chan
API — это именно то, что мне нужно, более того, он бесплатный :).
Ниже приведен фрагмент кода, который я использовал для добавления графика в адаптивную карточку для бота анализа настроений Twitter.
AdaptiveImage GetStatisticsChart(Dictionary<string, int> tweetSentimentAnalysis, int numberOfTweetsFound)
{
return new AdaptiveImage
{
Size = AdaptiveImageSize.Large,
Url = GetPieChartUrl(tweetSentimentAnalysis, numberOfTweetsFound)
};
}
Uri GetPieChartUrl(Dictionary<string, int> tweetSentimentAnalysis, int numberOfTweetsFound)
{
string seriesNames = string.Join('|', tweetSentimentAnalysis.Keys);
string percentages = string.Empty;
foreach (var val in tweetSentimentAnalysis.Values)
{
percentages += $"{Math.Round(((float)val * 100) / numberOfTweetsFound)},";
}
percentages = percentages.Remove(percentages.Length - 1);
return new Uri(string.Format(baseUrl, percentages, seriesNames));
}
Важной частью вышеприведенного кода является то, что URL адаптивного изображения установлен на URI конечной точки API со спецификой для генерации вашего графика. Параметры запроса, которые я интерполировал, были серией и тем, какой процент круговой диаграммы был охвачен ею. В моем примере и как показано на изображении ниже, в URL есть две серии, разделенные символом ‘|’, каждая со значением 50, разделенные символом ‘,’. Согласно документации по API, цвета каждой серии также могут быть определены, но я решил этого не делать, поскольку это немного сложнее, чем просто задать шестнадцатеричные коды для серий. 
Еще одна вещь, которую следует отметить, и вы можете увидеть это, просмотрев документацию, это то, что вы также можете изменить тип генерируемой диаграммы, в моем примере я выбрал круговую диаграмму, так как она лучше представляла данные.
Другие решения
Единственный другой способ создания изображения круговой диаграммы для адаптивной карты, который я могу предложить, — сделать это самостоятельно. Вы можете создать веб-приложение в Visual Studios или использовать существующее, или что вам больше нравится. Затем с помощью графического объекта сгенерировать диаграмму, используя параметры запроса или значения заголовка из запроса к одному из контроллеров приложения. Оттуда вы можете… просто вернуть изображение. В качестве альтернативы вы можете сохранить изображение графика в blob-хранилище в Azure или другом облачном провайдере после генерации изображения и интегрировать его с этим, чтобы получить обратно график, который вы хотите получить.
Вот ссылка на оригинальную серию сообщений о чатботе для анализа настроений в Twitter, если вам интересно:
- https://dev.to/albertbennett/sentiment-analysis-for-tweets-in-a-chat-bot-part-1-the-setup-4i24
Спасибо за прочтение и до встречи в следующем выпуске.