个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我正在尝试导出使用 chartjs 创建的图表，但没有实际站点，它只是一个创建图表的 Node 后端应用程序，然后我需要导出它并将其发送到 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。
最佳答案
使用chartjs-node-canvas ，这是使用 Canvas 的 Chart.js 的 Node JS 渲染器。
它提供了 chartjs-node 的替代方案，不需要 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 的图像
关于node.js - 没有html的Chartjs导出图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56048136/
27
4
0
我用运行 Node node --debug app OR node --debug-brk app 它有反应 debugger listening on port 5858 Express serv
这个问题在这里已经有了答案: What is the difference between (int *i) and (int* i) in context of both C and C++? [
我有一个应用程序，它通过消息队列将数据库写入命令分派(dispatch)给工作人员(数量非常大)，因此无法保证它们的接收顺序。 我有两个 Node ，例如“Account”和“Media”。在此假设的
有没有办法在调用 ts-node 时将选项传递给 Node ？我正在尝试在 Node 中使用一个实验性功能，如果它能与 ts-node 一起使用，那就太好了。 这就是我目前正在做的事情: ts-nod
我有一个容器化的Node应用程序，它在DigitalOcean服务器上运行。当我更新服务器上的应用程序时，该应用程序必须关闭一小段时间。为了能够更新应用程序并避免停机，我目前正在阅读零停机时间部署/蓝
我正在编写一个 Node.js 应用程序。我正在使用 request 和 Cheerio 加载一组 URL 并获取该网站的大量信息，现在假设我想要获取的只是标题: var urls = {"url_1
如果不弹出以下错误，我无法安装任何 Node.js 模块。错误代码引用package.json文件。如果知道为什么会发生这种情况，我们将不胜感激。 最佳答案 这些不是错误，它们只是警告。一切都应该如此
如果我运行(从我的项目目录中): supervisor javascripts/index.js 我得到:/usr/bin/env: Node :没有这样的文件或目录 如果我运行: node java
我已遵循使用 Node-Inspector 的所有步骤 但是当我打开应用程序时，我在控制台上看不到任何脚本或日志。 我的应用程序在端口 4000 上运行。我认为唯一可能发生冲突的是端口 8080 上的
我在android中使用rxjava2，有时会遇到这样的问题: Observable.fromArray( // maybe a list about photo url in SD
我目前正在使用 Node 光纤来编写同步服务器端代码。我主要通过 try-catch block 进行错误处理，但外部库或其他小部分异步代码中总是有可能发生错误。我正在考虑使用新的域功能来尝试将这些错
看起来node-debug是node-inspector周围的一个shell？分别什么时候应该使用？ 最佳答案 如果您安装node-debug，您只能访问node-debug命令。 如果您安装node
我目前正在代理后面工作，该代理不允许我执行此命令的 HTTP GET 请求阶段: Node node-sass/scripts/build.js 请求阶段: gyp http GET https://
听说node js可以用在服务端。我以前用过jsp。 jsp页面内部的java代码对客户端是不可见的。如果 Node js 只是 javascript，那么它如何对客户端不可见？ 最佳答案 首先，No
我正在为 Node native 插件从 node-waf 构建迁移到 node-gyp 构建系统。 node-gyp 说它支持多个目标版本，但我在使用 node-gyp 时找不到如何指定目标 Nod
给定一个 $node ，我正在尝试在以下两种输出该 $node 的方式之间做出决定。 要么 $output = theme('node', $node); 或 node_build_content($
如果package.json中的窗口A打开一个新窗口B，node-main如何访问它？这是我的代码: package.json { "main": "index.html",
我试图在我的 xml 中的特定节点 ( ) 之前插入一个注释节点。这是它的方法: function test(xmlResponse) { var parser = new DOMParse
我正在尝试做npm install wrtc使用 Node 版本 16.14.0 但这还没有完成。它在给npm error code 1所以我试图将 Node 版本更改为以前的 lts 14.19.0
当我在 Visual Studio 中运行 Node.js 应用程序时，我收到以下消息:DeprecationWarning: 'node --debug' 和 'node --debug-brk'
我是一名优秀的程序员,十分优秀！