Sfera/scan-sfera
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new commit

Browse Source
This commit is contained in:
54CHA
2025-07-19 17:56:06 +03:00
commit 4153e2c00a
140 changed files with 66097 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
scan-sphera-main/public/test-anychart.html Normal file
View File

@ -0,0 +1,231 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test AnyChart Box and Whisker</title>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.header {
background: #1e293b;
color: #22c55e;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
font-family: 'Courier New', monospace;
}
#chart-container {
width: 100%;
height: 500px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
margin-bottom: 20px;
}
.legend {
display: flex;
justify-content: center;
gap: 20px;
color: #1e293b;
font-size: 14px;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.legend-box {
width: 16px;
height: 12px;
background: rgba(34, 197, 94, 0.3);
border: 1px solid #22c55e;
}
.legend-line {
width: 16px;
height: 3px;
background: #16a34a;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>ПОЗИЦИИ • СРАВНЕНИЕ ТОВАРОВ</h1>
<div style="font-size: 14px; opacity: 0.8; margin-top: 8px;">
🔵 Ваш товар: 173269559 | 🔴 Конкурент: 388410028
</div>
</div>
<div id="chart-container"></div>
<div class="legend">
<div class="legend-item">
<div class="legend-box"></div>
<span>Диапазон позиций</span>
</div>
<div class="legend-item">
<div class="legend-line"></div>
<span>Медиана</span>
</div>
</div>
</div>
<script>
anychart.onDocumentReady(function () {
// Тестовые данные позиций товаров по городам
const testData = [
{
x: 'Москва',
low: 1,
q1: 1,
median: 1.5,
q3: 2,
high: 2,
outliers: []
},
{
x: 'СПб',
low: 3,
q1: 3,
median: 4.5,
q3: 6,
high: 6,
outliers: []
},
{
x: 'Казань',
low: 1,
q1: 1,
median: 1,
q3: 1,
high: 1,
outliers: []
},
{
x: 'Екатеринбург',
low: 1,
q1: 1,
median: 1,
q3: 1,
high: 1,
outliers: []
},
{
x: 'Новосибирск',
low: 1,
q1: 1,
median: 2.5,
q3: 4,
high: 4,
outliers: []
},
{
x: 'Краснодар',
low: 1,
q1: 1,
median: 1,
q3: 1,
high: 1,
outliers: []
},
{
x: 'Хабаровск',
low: 1,
q1: 1,
median: 1,
q3: 1,
high: 1,
outliers: []
}
];
// Создаем Box chart
const chart = anychart.box();
// Настраиваем заголовок
chart.title('Сравнение позиций товаров по городам');
chart.title().fontColor('#22c55e');
chart.title().fontSize(18);
chart.title().fontWeight('bold');
// Настраиваем оси
chart.yAxis().title('Позиция в поиске');
chart.yAxis().labels().format('{%value}');
chart.xAxis().title('Города');
chart.xAxis().staggerMode(true);
// Инвертируем ось Y через шкалу (1 позиция вверху)
try {
var yScale = chart.yScale();
if (yScale && typeof yScale.inverted === 'function') {
yScale.inverted(true);
}
} catch (error) {
console.log('Не удалось инвертировать ось Y:', error);
}
// Создаем серию
const series = chart.box(testData);
// Настраиваем внешний вид
series.whiskerWidth('60%');
series.fill('#22c55e', 0.3);
series.stroke('#22c55e', 2);
series.whiskerStroke('#22c55e', 2);
series.medianStroke('#16a34a', 3);
// Настраиваем подсказки
series.tooltip().format(
'Город: {%x}' +
'\nМин позиция: {%low}' +
'\nМакс позиция: {%high}' +
'\nМедиана: {%median}'
);
// Настраиваем сетку
try {
chart.grid(0).stroke('#e5e7eb', 1, '2 2');
chart.grid(1).layout('vertical').stroke('#e5e7eb', 1, '2 2');
} catch (error) {
console.log('Не удалось настроить сетку:', error);
// Альтернативный способ настройки сетки для Box диаграмм
try {
chart.yGrid(true);
chart.xGrid(true);
} catch (gridError) {
console.log('Альтернативная настройка сетки также недоступна:', gridError);
}
}
// Настраиваем фон
chart.background().fill('transparent');
// Устанавливаем контейнер и отрисовываем
chart.container('chart-container');
chart.draw();
});
</script>
</body>
</html>