I am trying to render a chart.js chart using phantomjs. However, upon running phantomjs, I get error ReferenceError: Can't find variable: Chart. Opening the HTML file, that I am trying to render, in a browser works without this problem.
- PhantomJS's script file:
page = require('webpage').create();
page.open('file:///path/to/file.html', function()
{
page.viewportSize = {
width: 850,
height: 300
};
page.render('graph.png');
phantom.exit(0);
});
file.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
The command that I use to run PhantomJS: phantomjs.exe script.js. I am using PhantomJS version 2.1.1.
Is there something that I forgot to set or configure?