Question

我正在尝试导出由chartjs创建的图表而没有实际站点，它只是创建该图表的节点后端应用程序，然后我需要将其导出并将其发送到松弛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。

Answer 1

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

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

这将与您的代码一起使用：

trackBy

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

Chart.js导出没有HTML的图表

1 个答案: