Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

After setting devicePixelRatio, the chart shows misplacement #66

Open
isegon opened this issue Nov 2, 2018 · 0 comments
Open

After setting devicePixelRatio, the chart shows misplacement #66

isegon opened this issue Nov 2, 2018 · 0 comments

Comments

@isegon
Copy link

isegon commented Nov 2, 2018

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 isegon changed the title After setting devAfter setting devicePixelRatio, the chart shows misplacementicePixelRatio, the chart shows misplacement After setting devicePixelRatio, the chart shows misplacement Nov 2, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant