Проблема с изображением PNG гистограммы с использованием холста на Node.js - PullRequest
Новая
       4

Проблема с изображением PNG гистограммы с использованием холста на Node.js

0 голосов
/ 09 мая 2020

Я новичок в библиотеке node.js и диаграммы. js. В настоящее время я пытаюсь создать гистограмму в PNG-изображении, используя Chart. js на узле. Я могу создать гистограмму на узле, но качество изображения плохое, а метка на оси слишком размыта.

Примечание: когда я создаю диаграмму в браузере, используя ту же диаграмму. js config, я получаю идеальную диаграмму без каких-либо проблем с размытием.

См. Ниже image :

Bar chart Image

Чтобы запустить код, выполните следующие действия:

  1. Убедитесь, что у вас установлен узел на вашем сервере
  2. make server. js и скопируйте ниже server. js code
  3. make package. json в той же папке и скопируйте ниже package. json код
  4. запустить npm install в терминале
  5. после завершения установки запустите node server в терминале
  6. шаг 4 создаст файл serverBar.png которые содержат график.

сервер. js


var Chart = require('chart.js');
var jsdom = require("jsdom");

const { createCanvas, loadImage } = require('canvas')
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = new JSDOM("").window;
global.document = document;
global.window = window;
const canvas = createCanvas(600, 300);

Chart.defaults.global.defaultFontColor = 'red';
 Chart.defaults.global.defaultFontSize = 16;



const ctx = canvas.getContext('2d');


// Data with datasets options
var data = {
    labels: ["Vanilla", "Chocolate", "Strawberry"],
      datasets: [
        {
            label: "Ice Cream Sales ",
            fill: true,
            backgroundColor: [
                'moccasin',
                'saddlebrown',
                'lightpink'],
            data: [11, 9, 4]
        }
    ]
};

// Notice how nested the beginAtZero is
var options = {
    responsive: false,
        title: {
                  display: true,
                  text: 'Ice Cream Truck Report',
                  position: 'bottom'
              },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
};


var myChart =  new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});




  var base64Data = myChart.toBase64Image().replace(/^data:image\/png;base64,/, "");

  require("fs").writeFile("serverBar.png", base64Data, 'base64', function(err) {
    console.log(err);
  });

пакет. json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "canvas": "^2.6.1",
    "chart.js": "^2.9.3",
    "d3": "^5.16.0",
    "jsdom": "^16.2.2"
  }
}

```
...