@ogurrr/minichart
Version:
Simple Library to creating charts in javascript
85 lines (70 loc) • 3.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MiniChart Example</title>
<script src="../main.js"></script>
</head>
<body>
<canvas id="linear" width="400" height="400"></canvas>
<canvas id="PieChart" width="400" height="400"></canvas>
<canvas id="ColumnChart" width="400" height="400"></canvas>
<canvas id="pointChart" width="500" height="500"></canvas>
<canvas id="layered" width="500" height="300"></canvas>
<script>
// Tworzymy dane wykresu w formacie JSON
const data = [
{x: 0, y: 0},
{x: 1, y: 1},
{x: 2, y: 1},
{x: 3, y: 1},
{x: 4, y: 5}
];
// Tworzymy obiekt klasy minichart
const canvas = document.getElementById('linear');
const chart = new minichart_line(canvas, 400, 400);
// Rysujemy wykres na podstawie danych JSON
chart.draw(data);
const data1 = [
{value: 30, color: '#e74c3c', label: 'Red'}, // Segment czerwony z podpisem
{value: 40, color: '#2ecc71', label: 'Green'}, // Segment zielony z podpisem
{value: 20, color: '#3498db', label: 'Blue'}, // Segment niebieski z podpisem
{value: 10, color: '#f39c12', label: 'Orange'} // Segment pomarańczowy z podpisem
];
// Tworzymy obiekt klasy minipiechart
const canvas1 = document.getElementById('PieChart');
const pieChart = new minichart_pie(canvas1, 150);
// Rysujemy wykres
pieChart.draw(data1);
const data2 = [
{value: 50, color: '#e74c3c', label: 'Red'}, // Słupek czerwony z podpisem
{value: 80, color: '#2ecc71', label: 'Green'}, // Słupek zielony z podpisem
{value: 120, color: '#3498db', label: 'Blue'}, // Słupek niebieski z podpisem
{value: 60, color: '#f39c12', label: 'Yellow'} // Słupek żółty z podpisem
];
// Tworzymy obiekt klasy minichart_column
const canvas2 = document.getElementById('ColumnChart');
const columnChart = new minichart_column(canvas2, 400, 500);
// Rysujemy wykres
columnChart.draw(data2,"inside");
const canvas3 = document.getElementById('pointChart');
const chart3 = new minichart_point(canvas3, 500, 500);
// Przykładowe dane w formacie JSON
const data3 = [
{x: 100, y: 900, label: "A", color: "#FF5733"},
{x: 200, y: 800, label: "B", color: "#33FF57"},
{x: 300, y: 700, label: "C", color: "#3357FF"},
{x: 400, y: 600, label: "D", color: "#FFFF33"},
{x: 700, y: 500, label: "E", color: "#FF33FF"},
{x: 850, y: 100, label: "F", color: "#FF33FF"},
];
// Rysowanie wykresu punktowego
chart3.draw(data3, 'above'); // Etykiety będą nad punktami
const canvas4 = document.getElementById("layered");
const chart4 = new minichart_progressbar(canvas4, 300, 500);
chart4.setProgress(75);
chart4.draw();
</script>
</body>
</html>