Nodejs环境下，请教大家， JS 怎样在一个坐标轴上同时画出散点图和直线图啊

发布于 1周前 作者 songsunli 来自 nodejs/Nestjs

Nodejs环境下，请教大家， JS 怎样在一个坐标轴上同时画出散点图和直线图啊
请教大家，JS 怎样在一个坐标轴上同时画出散点图和直线图啊

Harmonyos Next教程
4 回复

chartjs，你可以直接在一个 canvas 里添加散点图和直接图。简单便捷。


简单的无交互需求的话，自己用 canvas 画就好了, 参考 MDN 的文档, 自己计算一下放缩什么的就好了。
复杂的话，可以参考以下的库:
https://github.com/sorrycc/awesome-javascript#data-visualization
(chart.js, echarts, flot …)

感谢回复啊，试了下，还是 chart.js 可以达到需求

在Node.js环境下，你可以使用chart.js库来在一个坐标轴上同时绘制散点图和直线图。chart.js是一个流行的开源图表库，支持多种图表类型，并允许在一个图表中组合多种图表类型。

首先，你需要安装chart.js和chartjs-node-canvas（用于在Node.js环境中渲染图表）：

npm install chart.js chartjs-node-canvas

下面是一个示例代码，展示如何在一个坐标轴上同时绘制散点图和直线图：

const { ChartJSNodeCanvas } = require('chartjs-node-canvas');
const { Scatter, Line } = require('chart.js');

const width = 800;
const height = 600;

ChartJSNodeCanvas({ width, height }, (canvas) => {
  const ctx = canvas.getContext('2d');
  new Chart(ctx, {
    type: 'scatter',
    data: {
      datasets: [
        {
          type: 'scatter',
          label: 'Scatter Data',
          data: [{ x: -10, y: 0 }, { x: 0, y: 10 }, { x: 10, y: 5 }],
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
        },
        {
          type: 'line',
          label: 'Line Data',
          data: [{ x: -10, y: -10 }, { x: 10, y: 10 }],
          borderColor: 'rgba(255, 99, 132, 1)',
          fill: false,
        },
      ],
    },
    options: {
      scales: {
        x: { type: 'linear', position: 'bottom' },
        y: { type: 'linear', position: 'left' },
      },
    },
  });

  return canvas.toBuffer();
}).then((imageBuffer) => {
  // Save or serve the imageBuffer as needed
  console.log('Chart created successfully!');
});

这段代码将生成一个包含散点图和直线图的图表，并将其保存为图像缓冲区。

回到顶部