Создание диаграммы chart.js непосредственно в PNG в Node js? - PullRequest
Новая
       7

Создание диаграммы chart.js непосредственно в PNG в Node js?

0 голосов
/ 11 ноября 2018

Можно ли как-нибудь использовать Chart.js для создания гистограммы непосредственно в файл PNG? Я не хочу отображать диаграмму на своей веб-странице, я хочу отправить ее непосредственно в Facebook Messenger в виде изображения.

Я использовал следующий код для создания гистограммы на моей веб-странице: 

var ctx = document.getElementById("myChart").msGetInputContext("2d");
                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                        datasets: [{
                            label: '# of Votes',
                            data: [12, 19, 3, 5, 2, 3],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true
                                }
                            }]
                        }
                    }
                });

Но в этом конкретном случае мои пользователи будут взаимодействовать с моим приложением Node js через мессенджер Facebook, а не через веб-страницу. Мне нужен способ создать диаграмму без элемента HTML-холста, и я могу преобразовать диаграмму в изображение, используя .toBase64Image ().

Заранее спасибо за любую помощь!

Ответы [ 3 ]

0 голосов
/ 11 ноября 2018

Вы можете создать изображение из Canvas, используя toDataURL, поэтому после charts.js визуализирует график на холсте (myChart) 

var canvas = document.getElementById('myChart');
var dataURL = canvas.toDataURL();

dataURL не будет содержать строку base64 изображения. Вы можете записать его в файл и использовать файл или использовать строку любым другим способом.

Проверьте эту ссылку для преобразования строки в файл изображения, если хотите. https://gist.github.com/madhums/e749dca107e26d72b64d

Надеюсь, это то, что вы имели в виду.

0 голосов
/ 15 марта 2019

У меня была эта проблема, и я создал веб-сервис, который отображает диаграммы Chart.js в виде изображений PNG. Я открываю источник моей работы на этом

Услуга называется QuickChart . Например, если ваша конфигурация диаграммы: 

{
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Dogs',
      data: [ 50, 60, 70, 180, 190 ]
    }, {
      label: 'Cats',
      data: [ 100, 200, 300, 400, 500 ]
    }]
  }
}

Вы можете встроить конфигурацию Chart.js в URL следующим образом:

https://quickchart.io/chart?c={ тип: 'bar', данные: {метки: ['январь', 'февраль', 'март', 'апрель', 'май'], наборы данных: [{label: 'Dogs ', данные: [50, 60, 70, 180, 190]}, {метка:' Кошки ', данные: [100, 200, 300, 400, 500]}]}}

... и он отображает ваш график как изображение!

Обратите внимание, что для более сложных диаграмм вы хотите, чтобы URL кодировал параметры диаграммы.

На веб-сайте QuickChart имеется интерактивный редактор, который можно использовать для создания URL-адреса для заданной конфигурации диаграммы. Вы также можете просмотреть / разветвить исходный код здесь (он построен поверх node-canvas и chartjs-node-canvas).

0 голосов
/ 11 ноября 2018

Chart.js построен на элементе HTML5 canvas.

Чтобы использовать его в node.js, вам нужно подражать этому элементу в узле.

Существует пакет, который пытается обработать все необходимые библиотеки для этого porpuse, вы можете найти его здесь chartjs-узел

...