I want to do some tests with the library chart.js, I add the library manually to my project (without using bower).
I consulted this question in the English forum but currently there is not the dist folder in the download of github from the library.
I have tried downloading the Chart.bundle.min.js and Chart.bundle.js files separately from here but still it still does not work.
Finally I tried with other answers, which is download require.js and remains the same. Always the same error:
Uncaught ReferenceError: require is not defined at chart.js: 4
What is found in this line is the following:
var Chart = require('./core/core.js')();
Finally I include my code, I think it's irrelevant but it never hurts a little more information.
<html>
<head>
<title>Prueba 1</title>
<script language="javascript" type="text/javascript" src="chart/src/Chart.bundle.js"></script>
<script language="javascript" type="text/javascript" src="chart/src/Chart.bundle.min.js"></script>
<script language="javascript" type="text/javascript" src="chart/src/chart.js"></script>
<script language="javascript" type="text/javascript" src="chart/src/require.js"></script>
</head>
<body>
<div id="linegraph" style="height:400px;width:600px"></div>
<script type="text/javascript">
Chart.plugins.register({
beforeDraw: function(chart, easing) {
var chartArea = chart.chartArea;
var ctx = chart.chart.ctx;
// Replace these IDs if you have given your axes IDs in the config
var xScale = chart.scales['x-axis-1'];
var yScale = chart.scales['y-axis-1'];
var midX = xScale.getPixelForValue(0);
var midY = yScale.getPixelForValue(0);
// Top left quadrant
ctx.fillStyle = window.chartColors.red;
ctx.fillRect(chartArea.left, chartArea.top, midX - chartArea.left, midY - chartArea.top);
// Top right quadrant
ctx.fillStyle = window.chartColors.blue;
ctx.fillRect(midX, chartArea.top, chartArea.right - midX, midY - chartArea.top);
// Bottom right quadrant
ctx.fillStyle = window.chartColors.green;
ctx.fillRect(midX, midY, chartArea.right - midX, chartArea.bottom - midY);
// Bottom left quadrant
ctx.fillStyle = window.chartColors.yellow;
ctx.fillRect(chartArea.left, midY, midX - chartArea.left, chartArea.bottom - midY);
}
});
</script>
</body>
</html>
EDITED
A small bug that I had but still keeps giving me error was the position in which I added the require.js, by placing the script above the chart.js stop giving this error, but it gives me many others.
Uncaught Error: Module name "core / core.js" has not been loaded yet for context: _. Use require ([])
Uncaught TypeError: Can not read property 'plugins' of undefined at chart-test1.html: 15
I got one last mistake, this time with the require.js, it shows me all the file code so I do not know what the problem is