Настройка HTML

С помощью Chart.js вы можете добавить диаграммы JavaScript на HTML-страницу, используя элемент <canvas>. В HTML-файле добавьте следующий код внутри тега <body> (над тегами <script>):

<div class="container">
     <canvas id="myChart" width="600" height="400"></canvas>
</div>

Chart.js разместит ваш график внутри элемента <canvas>. Хотя график будет создан с помощью JavaScript, он появится на вашей странице в виде файла изображения PNG.

Теперь вам нужно добавить вашу пользовательскую конфигурацию в файл script.js.

Ниже покажу, как создать два вида диаграмм: вертикальную столбчатую диаграмму и диаграмму в виде пончика (или круга). Однако вы можете использовать ту же логику с любыми другими типами диаграмм. В документации Chart.js вы можете ознакомиться со всеми доступными типами диаграмм.

Была ли эта страница полезной?