Node.js Chartjs不带html导出图表_Node.js_Chart.js

Node.js Chartjs不带html导出图表

node.js chart.js

Node.js Chartjs不带html导出图表,node.js,chart.js,Node.js,Chart.js,我正在尝试导出一个用chartjs创建的图表，但没有实际的站点。它只是一个创建图表的节点后端应用程序，然后我需要导出它并将其发送到slack api 我想我会尝试创建一个虚拟dom，然后从那里导出，但它不起作用。我对这段代码的其他方法或修复持开放态度。我得到一个错误，说窗口未定义，但如果我使用console.log（window），它会说它是一个窗口对象，并且一切看起来都正常 const JSDOM = require("jsdom"); const Chart = require("chart

我正在尝试导出一个用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");
}

constjsdom=require（“JSDOM”）；
const Chart=require（“Chart.js”）；
constdom=newjsdom.JSDOM（```）；
const canvas=dom.window.document.getElementById（'myChart'）；
const ctx=canvas.getContext（'2d'）；
常量图表=新图表（ctx{
键入：“行”，
数据：{
标签：[“长期成本”、“运行成本”]，
数据集：[{
标签：“清洗和清洁”，
数据：[0,8]，
背景颜色：“#22aa99”
}, {
标签：“交通罚单”，
数据：[0,2]，
背景颜色：“#994499”
}, {
标签：‘过路费’，
数据：[0,1]，
背景颜色：“#316395”
}, {
标签：“停车场”，
数据：[5,2]，
背景颜色：“#b82e2e”
}, {
标签：“汽车税”，
数据：[0,1]，
背景颜色：“#66aa00”
}, {
标签：“维修和改进”，
数据：[0,2]，
背景颜色：“#dd4477”
}, {
标签：“维护”，
数据：[6,1]，
背景颜色：“#0099c6”
}, {
标签：“检查”，
数据：[0,2]，
背景颜色：“#990099”
}, {
标签：“贷款利息”，
数据：[0,3]，
背景颜色：“#109618”
}, {
标签：“车辆折旧”，
数据：[0,2]，
背景颜色：“#109618”
}, {
标签：“燃料”，
数据：[0,1]，
背景颜色：“#dc3912”
}, {
标签：“保险和故障险”，
数据：[4,0]，
背景颜色：“#3366cc”
}]
},
选项：{
onAnimationComplete:animationDone，
回答：错，
图例：{
位置：'右'
},
比例：{
xAxes：[{
是的
}],
雅克斯：[{
是的
}]
}
}
});
函数animationDone（）{
返回canvas.toDataUrl（“image/jpg”）；
}

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

使用，这是一个使用canvas的Chart.JS节点JS渲染器

它提供和替代chartjs节点，该节点不需要jsdom（或它所需的全局变量），并允许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的图像

无需jsdom=>。chart.js提供了

toBase64Image（）

，但是没有html我无法创建图表？toBase64Image（）仍然需要启动图表，我需要html。很抱歉，我错过了。示例不起作用，但github中的示例起作用