时间戳

首页 > 解决方案 > Chartjs 导出不带html的图表

node.js - Chartjs 导出不带html的图表

问题描述

我正在尝试在没有实际站点的情况下导出使用 chartjs 创建的图表，它只是一个创建图表的节点后端应用程序，然后我需要将其导出并将其发送到 slack api。

我想我会尝试创建一个虚拟 dom，然后从那里导出，但它不起作用。我对其他方法或对此代码的修复持开放态度。我收到一个错误，说窗口未定义，但如果我 console.log(window) 它说它是一个窗口对象，一切看起来都很正常。

const JSDOM = require("jsdom");
const Chart = require("chart.js");

const dom = new JSDOM.JSDOM(`<!DOCTYPE html><canvas id="myChart" width="400" height="400"></canvas>`);
const canvas = dom.window.document.getElementById('myChart');
const ctx = canvas.getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Standing costs', 'Running costs'],
    datasets: [{
      label: 'Washing and cleaning',
      data: [0, 8],
      backgroundColor: '#22aa99'
    }, {
      label: 'Traffic tickets',
      data: [0, 2],
      backgroundColor: '#994499'
    }, {
      label: 'Tolls',
      data: [0, 1],
      backgroundColor: '#316395'
    }, {
      label: 'Parking',
      data: [5, 2],
      backgroundColor: '#b82e2e'
    }, {
      label: 'Car tax',
      data: [0, 1],
      backgroundColor: '#66aa00'
    }, {
      label: 'Repairs and improvements',
      data: [0, 2],
      backgroundColor: '#dd4477'
    }, {
      label: 'Maintenance',
      data: [6, 1],
      backgroundColor: '#0099c6'
    }, {
      label: 'Inspection',
      data: [0, 2],
      backgroundColor: '#990099'
    }, {
      label: 'Loan interest',
      data: [0, 3],
      backgroundColor: '#109618'
    }, {
      label: 'Depreciation of the vehicle',
      data: [0, 2],
      backgroundColor: '#109618'
    }, {
      label: 'Fuel',
      data: [0, 1],
      backgroundColor: '#dc3912'
    }, {
      label: 'Insurance and Breakdown cover',
      data: [4, 0],
      backgroundColor: '#3366cc'
    }]
  },
  options: {
    onAnimationComplete: animationDone,
    responsive: false,
    legend: {
      position: 'right'
    },
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});

function animationDone() {
  return canvas.toDataUrl("image/jpg");
}

我只想要一个可以发送到 slack api 的图像文件或 url。

标签： node.jschart.js

解决方案

使用chartjs-node-canvas，这是一个使用 canvas 的 Chart.js 的 Node JS 渲染器。

它提供了不需要 jsdom（或需要的全局变量）的 chartjs-node 的替代方案，并允许 chartJS 作为对等依赖项，因此您可以自己管理其版本。

这是它将如何与您的代码一起使用：

const { CanvasRenderService } = require('chartjs-node-canvas');

const width = 400;
const height = 400;
const chartCallback = (ChartJS) => {

    // Global config example: https://www.chartjs.org/docs/latest/configuration/
     ChartJS.defaults.global.elements.rectangle.borderWidth = 2;
    // Global plugin example: https://www.chartjs.org/docs/latest/developers/plugins.html
     ChartJS.plugins.register({
        // plugin implementation
    });
    // New chart type example: https://www.chartjs.org/docs/latest/developers/charts.html
    ChartJS.controllers.MyType = ChartJS.DatasetController.extend({
        // chart implementation
    });
};

const canvasRenderService = new CanvasRenderService(width, height, chartCallback);

(async () => {
    const configuration = {
type: 'line',
data: {
    labels: ['Standing costs', 'Running costs'],
    datasets: [{
      label: 'Washing and cleaning',
      data: [0, 8],
      backgroundColor: '#22aa99'
    }, {
      label: 'Traffic tickets',
       data: [0, 2],
       backgroundColor: '#994499'
    }, {
      label: 'Tolls',
      data: [0, 1],
       backgroundColor: '#316395'
    }, {
       label: 'Parking',
       data: [5, 2],
       backgroundColor: '#b82e2e'
    }, {
       label: 'Car tax',
       data: [0, 1],
       backgroundColor: '#66aa00'
    }, {
      label: 'Repairs and improvements',
       data: [0, 2],
       backgroundColor: '#dd4477'
    }, {
       label: 'Maintenance',
       data: [6, 1],
       backgroundColor: '#0099c6'
    }, {
       label: 'Inspection',
       data: [0, 2],
       backgroundColor: '#990099'
    }, {
       label: 'Loan interest',
       data: [0, 3],
       backgroundColor: '#109618'
    }, {
       label: 'Depreciation of the vehicle',
       data: [0, 2],
       backgroundColor: '#109618'
    }, {
       label: 'Fuel',
       data: [0, 1],
       backgroundColor: '#dc3912'
    }, {
       label: 'Insurance and Breakdown cover',
       data: [4, 0],
       backgroundColor: '#3366cc'
    }]
  },
 options: {
     responsive: false,
     legend: {
       position: 'right'
    },
     scales: {
       xAxes: [{
         stacked: true
      }],
       yAxes: [{
         stacked: true
      }]
    }
  }
    };
     const dataUrl = await canvasRenderService.renderToDataURL(configuration);
})();

dataUrl 变量将包含您可以传递给 Slack API 的图像

推荐阅读