chartjs-node icon indicating copy to clipboard operation
chartjs-node copied to clipboard

After setting devicePixelRatio, the chart shows misplacement

Open isegon opened this issue 7 years ago • 0 comments

Hi, All: I use chartjs-node in my project. I think the chart is blurry, so I set the devicePixelRatio to 2, and the chart is clearer, but there are some places that show misplacement, please see the image below: 2018-11-02_063438

2018-11-02_063406

I use node.js v10.4.0 and Centos 7, and below is the code:

    const chartNode = new ChartjsNode(816, 426, 1);
    let datasets = [
      {
        label: _config.pdftemplate.label,
        data: dataSet.y,
        backgroundColor: 'blue',
        borderColor: 'blue',
        fill: false,
        pointRadius: 0,
        borderWidth: 1,
        yAxisID: 'y-axis-1',
      },
    ];

    let yAxes = [
      {
        type: 'linear',
        display: true,
        position: 'left',
        id: 'y-axis-1',
        scaleLabel: {
          display: true,
          labelString: title,
        },
      },
    ];

    const chartJsOptions = {
      type: 'line',
      data: {
        labels: dataSet.x,
        datasets,
      },
      options: {
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            fontFamily: "'Helvetica', 'Arial'",
            boxWidth: 20,
          },
        },
        scales: {
          yAxes,
        },
      },
    };

    return chartNode
      .drawChart(chartJsOptions)
      .then(() => {
        // chart is created

        // get image as png buffer
        return chartNode.getImageBuffer('image/png');
      })
      .then(buffer => {
        // Array.isArray(buffer); // => true
        // as a stream
        chartNode.destroy();
        return `data:image/png;base64,${buffer.toString('base64')}`;
        // return chartNode.getImageStream('image/png');
      });

isegon avatar Nov 02 '18 07:11 isegon