Вот наиболее популярные:
1. Chart.js
Chart.js — это простая и легкая библиотека, которая позволяет создавать 8 типов графиков. Поддерживает анимацию и отлично подходит для проектов, где нужно быстро добавить диаграмму.
Пример использования:
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>2. D3.js
D3.js — это мощная библиотека для работы с данными и создания сложных визуализаций. Она предоставляет гибкость, но требует больше усилий для настройки.
Пример использования:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3 Visualization</title>
</head>
<body>
<!-- Здесь будет визуализация -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
const data = [30, 86, 168, 281, 303, 365];
d3.select("body")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", d => `${d}px`)
.style("background-color", "steelblue")
.style("margin", "5px")
.style("color", "white")
.style("padding", "5px")
.text(d => d);
</script>
</body>
</html>
3. Highcharts
Highcharts — это коммерческая библиотека, но ее можно использовать бесплатно в личных проектах. Она предлагает широкий выбор типов графиков и богатый функционал.
Пример использования:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
}]
});
</script>4. ECharts
ECharts — это мощная библиотека от компании Baidu, которая поддерживает множество типов графиков и интерактивные возможности. Она особенно хорошо подходит для создания профессиональных интерактивных диаграмм.
Пример использования:
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts Example'
},
tooltip: {},
xAxis: {
data: ['shirt', 'cardigan', 'chiffon shirt', 'pants', 'heels', 'socks']
},
yAxis: {},
series: [{
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
</script>5. Plotly.js
Plotly.js — это библиотека, которая поддерживает создание множества типов диаграмм, включая 3D и карты. Она хорошо подходит для научных и финансовых визуализаций.
Пример использования:
<div id="myDiv"></div>
<script src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script>
<script>
var data = [
{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar'
}
];
Plotly.newPlot('myDiv', data);
</script>6. ApexCharts
ApexCharts — это современная библиотека, которая предлагает множество готовых вариантов диаграмм, включая линейные графики, гистограммы, круговые диаграммы и многое другое. ApexCharts достаточно удобен в использовании.
Пример использования:
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
var options = {
series: [{
name: 'Sales',
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
chart: {
type: 'line',
height: 350
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script> Каждая из этих библиотек имеет свои особенности:
- Chart.js — простота и легкость.
- D3.js — максимальная гибкость, но требует больше кода.
- Highcharts — богатый функционал, подходит для коммерческого использования.
- ECharts — мощная и интерактивная.
- Plotly.js — отлично подходит для научных и аналитических визуализаций.
- ApexCharts — современный и удобный API.
