<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/3e8a6aa84f.js" crossorigin="anonymous"></script>
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.0/chart.js" integrity="sha512-u3FteoY+ZuQUS4sq/DZOd9YkpaBiSb48h4+QVIfDfnwm1hTbruedgszSsJujfwZA6qS0STlTEpUmxU1FjbZqAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="column"></div>
<canvas id="myChart"></canvas>
<div id="components-demo">
<button-counter></button-counter>
</div>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [11, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">Счётчик кликов — {{ count }}</button>'
})
new Vue({ el: '#components-demo' })
</script>
</body>
</html>canvas{
width: 100px;
height: 100px;
}
.column{
position: relative;
width: 20vw;
height: 20vw;
background-color: #e2e2e2;
display: inline-block;
}
ctx традиционно обозначают не элемент canvas, а взятый из него context (который бывает 2d, webgl и др. ctx.width = 100;
ctx.height = 100;
Простой
Простой
Простой
Простой
Простой
Средний