Chartjs-Node 설치

install_chartjs_node.md

Chartjs-Node

---

설치

• MacOSX

$ brew install pkg-config cairo pango libpng jpeg giflib

• CentOS

$ sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel

• Node.js v6 LTS

$ curl --silent --location https://rpm.nodesource.com/setup_6.x | bash -
$ sudo yum install -y nodejs

CentOS 7.3.1611 에서 설치를 하는 도중 아래와 같은 에러 발생….

Error: Package: 1:nodejs-6.11.1-1.el7.x86_64 (epel)

Requires: libhttp_parser.so.2()(64bit)

Error: Package: 1:nodejs-6.11.1-1.el7.x86_64 (epel)

Requires: http-parser >= 2.7.0

You could try using --skip-broken to work around the problem

You could try running: rpm -Va --nofiles --nodigest

아래와 명령어 실행 후 다시 설치..

$ sudo rpm -ivh https://kojipkgs.fedoraproject.org//packages/http-parser/2.7.1/3.el7/x86_64/http-parser-2.7.1-3.el7.x86_64.rpm

• Node module 설치

$ sudo npm install --save canvas chart.js chartjs-node

참고: node-canvas, chartjs-node

Example

const ChartjsNode = require('chartjs-node');
let chartJsOptions = {
    "type": "bar",
    "data": {
        "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        "datasets": [{
            "label": "# of Votes",
            "data": [12, 19, 3, 5, 2, 3],
            "backgroundColor": [
                "rgba(255, 99, 132, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(255, 206, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
                "rgba(153, 102, 255, 0.2)",
                "rgba(255, 159, 64, 0.2)"
            ],
            "borderColor": [
                "rgba(255,99,132,1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
                "rgba(153, 102, 255, 1)",
                "rgba(255, 159, 64, 1)"
            ],
            "borderWidth": 1
        }]
    },
    "options": {
        "scales": {
            "yAxes": [{
                "ticks": {
                    "beginAtZero": true
                }
            }]
        }
    }
};


// 600x600 canvas size
let chartNode = new ChartjsNode(600, 600);
chartNode.drawChart(chartJsOptions)
    .then(() => {
        return chartNode.getImageBuffer('image/png');
    })
    .then(buffer => {
        Array.isArray(buffer)
        return chartNode.getImageStream('image/png');
    })
    .then(streamResult => {
        streamResult.stream // => Stream object
        streamResult.length // => Integer length of stream
        return chartNode.writeImageToFile('image/png', './testimage.png');
    })
    .then(() => {});

testimage.png