Нарисовать график с возможностью увеличения
Вложений: 1
Здравствуйте. Есть устройство которое при помощи датчика измеряет атмосферное давление и сохраняет в своей памяти. Устройство имеет Wi-Fi соединение и при переходе по его ip адресу отдает браузеру html код в котором содержится 339 значений сохраненного давления и дата/время замера. Нужно отобразить это на графике. По Х дата/время, по Y величина давления. Устройство программирую я сам. Сейчас созданная html страница выглядит так:
<!DOCTYPE HTML>
<html><head>
<meta content = "text/html; charset=UTF-8" http-equiv = "content-type">
<script src="http://d3js.org/d3.v5.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
</head><body><script type="text/javascript">
var svg = dimple.newSvg("body", "100%", 910);
var data = [
{ "DateTime":"2020-09-03T20:00:00", "pressure":762},
{ "DateTime":"2020-09-03T21:00:00", "pressure":762},
{ "DateTime":"2020-09-03T22:00:00", "pressure":761},
{ "DateTime":"2020-09-03T23:00:00", "pressure":762},
{ "DateTime":"2020-09-04T00:00:00", "pressure":762},
{ "DateTime":"2020-09-04T01:00:00", "pressure":762},
{ "DateTime":"2020-09-04T02:00:00", "pressure":762},
{ "DateTime":"2020-09-04T03:00:00", "pressure":763},
{ "DateTime":"2020-09-04T04:00:00", "pressure":762},
{ "DateTime":"2020-09-04T05:00:00", "pressure":762},
{ "DateTime":"2020-09-04T06:00:00", "pressure":762},
{ "DateTime":"2020-09-04T07:00:00", "pressure":763},
{ "DateTime":"2020-09-04T08:00:00", "pressure":763},
{ "DateTime":"2020-09-04T09:00:00", "pressure":763},
{ "DateTime":"2020-09-04T10:00:00", "pressure":762},
{ "DateTime":"2020-09-04T11:00:00", "pressure":762},
{ "DateTime":"2020-09-04T12:00:00", "pressure":762},
{ "DateTime":"2020-09-04T13:00:00", "pressure":761},
{ "DateTime":"2020-09-04T14:00:00", "pressure":761},
{ "DateTime":"2020-09-04T15:00:00", "pressure":761},
{ "DateTime":"2020-09-04T16:00:00", "pressure":760},
{ "DateTime":"2020-09-04T17:00:00", "pressure":760},
{ "DateTime":"2020-09-04T18:00:00", "pressure":759},
{ "DateTime":"2020-09-04T19:00:00", "pressure":759},
{ "DateTime":"2020-09-04T20:00:00", "pressure":759},
{ "DateTime":"2020-09-04T21:00:00", "pressure":759},
{ "DateTime":"2020-09-04T22:00:00", "pressure":759},
{ "DateTime":"2020-09-04T23:00:00", "pressure":759},
{ "DateTime":"2020-09-05T00:00:00", "pressure":759},
{ "DateTime":"2020-09-05T01:00:00", "pressure":759},
{ "DateTime":"2020-09-05T02:00:00", "pressure":759},
{ "DateTime":"2020-09-05T03:00:00", "pressure":759},
{ "DateTime":"2020-09-05T04:00:00", "pressure":759},
{ "DateTime":"2020-09-05T05:00:00", "pressure":759},
{ "DateTime":"2020-01-01T00:00:00", "pressure":0},
{ "DateTime":"2020-01-01T00:00:00", "pressure":0},
{ "DateTime":"2020-01-01T00:00:00", "pressure":0}
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(70, 30, "95%", 600);
var x = myChart.addCategoryAxis("x", "DateTime");
var y = myChart.addMeasureAxis("y", "pressure");
x.showGridlines = true;
x.fontSize = "auto";
x.title = "Дата/Время";
y.overrideMin = 700;
y.overrideMax = 800;
y.fontSize = "auto";
y.title = "Давление в мм рт.ст.";
myChart.addSeries(null, dimple.plot.line);
myChart.draw();
</script></body>
Использовал dimple библиотеку. Но при выводе всех 339 значений происходит сильное наложение даты и времени по оси Х, что делает ее нечитаемой. Очень сильно понравился пример: Brush & Zoom line chart Здесь колёсиком мыши можно увеличивать или уменьшать график. Но там идет загрузка данных из csv файла. Как туда впихнуть мои строчки я не понимаю. |
Цитата:
2020-09-03T20:00:00;762 2020-09-03T21:00:00;762 2020-09-03T22:00:00;761 ..... разделителем данных может быть запятая или точка с запятой. Выясните какой формат данных ожидается, и данные вашего объекта легко может преобразовать и в CSV. Хотя лучше почитать документацию, вполне возможно тип данных может быть и другим, включая и объектом. |
Цитата:
Получается что dimple это надстройка над графической библиотекой D3. В D3 есть несколько методов загрузки: Код:
d3.csv()
var data = [
{ "DateTime":"2020-09-03T20:00:00", "pressure":762},
{ "DateTime":"2020-09-03T21:00:00", "pressure":761},
...
{ "DateTime":"2020-09-05T05:00:00", "pressure":759},
{ "DateTime":"2020-01-01T00:00:00", "pressure":0}
];
значит они как то переходят от var data =[] к D3 и рисуют график. Вопрос как? Как вообще график с масштабированием нарисовать? Чтобы все данные были внутри html кода. |
Цитата:
|
Цитата:
var data = [ {},{}, {}... ] Который передается в функцию обратного вызова Цитата:
https://bl.ocks.org/EfratVil/92f894a...11e73f633a3e2f есть исходный код. Там есть вызов d3.csv("CIMIS_Station_125.csv", type, function (error, data) { ... }) Очевидно внутри функции функции обратного вызова, которая получает массив data и происходит вся работа |
Цитата:
|
Цитата:
Цитата:
Цитата:
Или как крайний вариант хотя бы даты прорядить в первоначальном виде кода. |
| Часовой пояс GMT +3, время: 17:24. |