231 lines
7.8 KiB
HTML
231 lines
7.8 KiB
HTML
<!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> |