Рисуем график в Bootstrap

График рисует Chart.js; Bootstrap отвечает за сетку страницы. Код и скачиваемый архив ниже относятся к Chart.js 1.x и jQuery 1.11.1 из заметки 2018 года. Демо по ссылке теперь показывает статический SVG-вариант загрузки учебных JSON-данных, а не исполнение этого старого PHP-кода. Метод .Line() и старые параметры нельзя переносить в Chart.js 4.x. PHP-фрагмент также требует серверного исполнения; он не является готовой статической страницей.

Для вывода графика необходимо подключить 2 бибиотеки: Chart.min.js и jquery-1.11.1.min.js Сам график выводится следующим кодом:

<!DOCTYPE html>
<html lang="en">
<head>
<title>ДЕМО - Рисуем график в Bootstrap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/Chart.min.js"></script>
</head>
<?
echo "<div class='col-md-4 col-xs-12'>";
echo "<div class='col-md-12 col-xs-12 padding_top_15' >";
echo "<h5 class='clearfix pull-left'>&nbsp;&nbsp;&nbsp;&nbsp;</h5>";
echo "<div id='grafmonth'></div>";
echo "</div>";
echo "</div>";
?>

<script>
<?
$url2[0]="'json/json_yandex.php'";
echo '$.getJSON('.$url2[0].', function(json){';
echo 'var month = [];';
echo 'for (var i = 0; i < json.length; i++) {';
echo 'month.push(json[i])';
echo '}';
echo 'var datasets2 = [{';
echo 'label: "Месяц",';
echo 'fillColor: "rgba(48,160,235,0.2)",';
echo 'strokeColor: "rgba(48,160,235,1)",';
echo 'pointColor: "rgba(48,160,235,1)",';
echo 'pointStrokeColor: "#fff",';
echo 'pointHighlightFill: "#fff",';
echo 'pointHighlightStroke: "rgba(48,160,235,1)",';
echo 'data: month';
echo '}];';
echo 'var lineChartData2 = {';
echo 'labels: ["b","a","a","a","a","a","a","a","a","a"],';
echo 'datasets: datasets2';
echo '};';
echo 'new Chart(makeCanvas("grafmonth")).Line(lineChartData2, params);';
echo '});';
?>

// -------------- графики и таблицы -----------------------
function makeCanvas(id, opt_width, opt_height) {
var container = document.getElementById(id);
container.innerHTML = '';
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = opt_width || 600;
canvas.height = opt_height || 200;
container.appendChild(canvas);
return ctx;
};

function makeCanvasBarChart(id, opt_width, opt_height) {
var container = document.getElementById(id);
container.innerHTML = '';
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
container.appendChild(canvas);
return ctx;
};

var params = {
responsive: true,
datasetStrokeWidth : 1,
animationEasing: "easeOutElastic",
tooltipCornerRadius: 3,
scaleFontSize: 10,
tooltipFontFamily: "'Open Sans', sans-serif",
tooltipFontStyle: "300",
tooltipTitleFontStyle: "300",
tooltipTitleFontFamily: "'Open Sans', sans-serif",
scaleGridLineWidth : 0.5,
bezierCurve : false,
scaleBeginAtZero : true
};

var paramsLineBarChart = {
responsive: true,
barShowStroke : false,
barValueSpacing : 1,
scaleShowLabels: false
};

</script>

</body>
</html>

Демо можно скачать тут. Посмотреть демо можно здесь.

Вариант для API Chart.js 4.x

Подключите локальную сборку Chart.js 4.x, затем разместите canvas и скрипт. JSON по адресу /json/month.json должен содержать до десяти чисел; подписи сохранены из исходного примера.

<div class="chart-container"><canvas id="month-chart" aria-label="Показатели за месяц" role="img"></canvas></div>
<p id="chart-status" role="status"></p>

.chart-container { position: relative; height: 200px; }

async function drawMonth() {
  const status = document.getElementById('chart-status');
  try {
    const response = await fetch('/json/month.json');
    if (!response.ok) throw new Error('HTTP');
    const values = await response.json();
    if (!Array.isArray(values) || values.length > 10 || !values.every(value => typeof value === 'number' && Number.isFinite(value))) throw new Error('Формат');
    if (!values.length) { status.textContent = 'Нет данных для графика.'; return; }
    new Chart(document.getElementById('month-chart'), {
      type: 'line',
      data: {
        labels: ['b','a','a','a','a','a','a','a','a','a'].slice(0, values.length),
        datasets: [{ label: 'Месяц', data: values, borderColor: '#30a0eb', backgroundColor: 'rgba(48,160,235,0.2)', fill: true, tension: 0, pointRadius: 0, pointHoverRadius: 3, pointHitRadius: 8 }]
      },
      options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
    });
  } catch {
    status.textContent = 'Не удалось загрузить данные графика.';
  }
}
drawMonth();

У линии нет постоянных крупных точек; маркер появляется при наведении. Перед публикацией своего примера проверьте пустые данные, подписи, сетку и ширину на телефоне. Исторический архив содержит также вспомогательный код столбчатого графика; его параметры относятся к старому API.

Проверенные источники

www.chartjs.org, www.chartjs.org. Проверено 10 октября 2026 года.