chart.js-example/index.html at master · jyzbamboo/chart.js-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!doctype html>
<html>

<head>
    <title>X-axis Example based on Time</title>
	<script src="https://momentjs.com/downloads/moment.js"></script>
	<script src="https://www.chartjs.org/dist/2.9.3/Chart.js"></script>
	<script src="./data.js"></script>
	<style>
	canvas{
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	</style>
</head>

<body>
	<div style="width:75%;">
		<canvas id="canvas"></canvas>
	</div>

	<script>
		var config = {
            type: 'line',
            data: {
                datasets: dataArr
            },
            options: {
                maintainAspectRatio: false,
                aspectRatio: 0.4,
                responsive: true,
                title: {
                display: true,
                text: 'X-axis Example based on Time'
                },
                scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        format: "lll",
                        tooltipFormat: 'lll'
                    },
                    ticks: {
                        autoSkip: true,
                        maxRotation: 0,
                        minRotation: 0
                    }
                }]
                }
            }
        };

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myLine = new Chart(ctx, config);
		};

	</script>
</body>

</html>