File size: 4,907 Bytes
dfaa01c 9e19043 dfaa01c 9e19043 dfaa01c 9255fab dfaa01c 3b34ca6 968cf95 9e19043 dfaa01c 9255fab 3b34ca6 dfaa01c 9255fab dfaa01c 3b34ca6 dfaa01c 968cf95 9e19043 dfaa01c 9255fab 3b34ca6 dfaa01c 9e19043 dfaa01c 3b34ca6 9e19043 3b34ca6 9e19043 3b34ca6 9e19043 3b34ca6 dfaa01c 9255fab 3b34ca6 dfaa01c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Графики pH и EC</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<h1>Графики за <span id="week_number">{{ data.week }}</span>-ю неделю</h1>
<button id="prev_week" onclick="navigateWeek(-1)">Предыдущая неделя</button>
<button id="next_week" onclick="navigateWeek(1)">Следующая неделя</button>
<div id="ph_chart"></div>
<div id="ec_chart"></div>
<div id="pump_chart"></div>
<script>
const weekNumber = {{ data.week }};
const data = {{ data | tojson }}; // Данные из Flask
function navigateWeek(change) {
const newWeek = weekNumber + change;
if (newWeek >= 1 && newWeek <= 30) {
window.location.href = `/plot_ph_week?week=${newWeek}`;
}
}
// Создаём кастомный hovertemplate для добавления дня недели
function addHoverTemplate(name, days) {
return {
hovertemplate: '%{x}<br>%{y}<br>День недели: ' + days + '<br>' + name + ': %{text}' + '<extra></extra>',
hoverinfo: 'x+y+text'
};
}
// Рендерим графики с использованием Plotly.js
Plotly.newPlot("ph_chart", [{
x: data.dates, // Используем даты для оси X
y: data.ph,
type: "scatter",
mode: "lines+markers", // Добавим маркеры для данных
name: "pH",
marker: { symbol: "circle", color: "blue" },
text: data.days_of_week, // Добавляем дни недели в качестве текста
...addHoverTemplate("pH", data.days_of_week)
}], {
title: `График pH за ${data.week}-ю неделю`,
xaxis: { title: "Дата" }, // Ось X теперь - это даты
yaxis: { title: "pH" }
});
Plotly.newPlot("ec_chart", [{
x: data.dates, // Используем даты для оси X
y: data.ec,
type: "scatter",
mode: "lines+markers", // Добавим маркеры для данных
name: "EC",
line: { color: "green" },
marker: { symbol: "cross", color: "red" },
text: data.days_of_week, // Добавляем дни недели в качестве текста
...addHoverTemplate("EC", data.days_of_week)
}], {
title: `График EC за ${data.week}-ю неделю`,
xaxis: { title: "Дата" }, // Ось X теперь - это даты
yaxis: { title: "EC" }
});
// График насосов, с добавлением дня недели на точке
Plotly.newPlot("pump_chart", [
{
x: data.dates,
y: data.onA,
type: "scatter",
mode: "lines+markers",
name: "Насос A",
line: { color: "blue" },
marker: { symbol: "circle", color: "blue" },
text: data.days_of_week, // Добавляем дни недели в качестве текста
...addHoverTemplate("Насос A", data.days_of_week)
},
{
x: data.dates,
y: data.onB,
type: "scatter",
mode: "lines+markers",
name: "Насос B",
line: { color: "brown" },
marker: { symbol: "square", color: "brown" },
text: data.days_of_week, // Добавляем дни недели в качестве текста
...addHoverTemplate("Насос B", data.days_of_week)
},
{
x: data.dates,
y: data.onC,
type: "scatter",
mode: "lines+markers",
name: "Насос C",
line: { color: "orange" },
marker: { symbol: "triangle-up", color: "orange" },
text: data.days_of_week, // Добавляем дни недели в качестве текста
...addHoverTemplate("Насос C", data.days_of_week)
}
], {
title: `График работы насосов за ${data.week}-ю неделю`,
xaxis: { title: "Дата" }, // Ось X теперь - это даты
yaxis: { title: "Состояние насосов" }
});
</script>
</body>
</html>
|