nvd3: как сделать статический график похожим на график в реальном времени
Я новичок в nvd3 и все еще изучаю концепции. В моемflask
project Я пытаюсь отобразить линейную диаграмму для статических данных, которая кажется движущейся, как мы видим в данных в реальном времени, но я мог бы просто получить статическую диаграмму.
Ниже мой HTML
код, в котором я беру данные из серверной части, то есть "j_data", из которого я формирую список с именем "list1". Этот список содержит 634 элемента, для которых я хочу отобразить диаграмму.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../static/css/nvd3181.css">
<style>
#chart svg {height: 400px;}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="../static/jquery.js"></script>
<script src="../static/nvd3_181.js"></script>
<script>
nv.addGraph(function () {
var chart = nv.models.lineWithFocusChart()
.useInteractiveGuideline(true).options({
brushExtent: [1,100]
});
chart.xAxis
.axisLabel('Dataset')
.tickFormat(d3.format(',r'))
;
chart.yAxis
.axisLabel('Predicted Values')
.tickFormat(d3.format('.02f'))
;
d3.select('#chart svg')
.datum(data())
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});
function data() {
var pred_data = JSON.parse('{{j_data | safe}}');
var list1 = [];
for (var i = 0; i <pred_data.length; i++) {
list1.push({ x: i, y: pred_data[i] });
}
return [
{
values: list1,
key: 'predicted values',
color: '#ff7f0e'
}
];
}
</script>
</head>
<body>
<div class="panel-heading">Line chart for {{model_name}}</div>
<div id="chart">
<svg></svg>
</div>
</div><br>
<a href="/">Go back to home page.</a>
</body>
</html>
Я использовал lineWithFocusChart() и получил эту диаграмму
Я думаю автоматически переместить кисть слева направо, чтобы диаграмма выглядела как движущаяся [как в диаграммах реального времени], но я не понимаю, как это сделать. пожалуйста, помогите мне разобраться с этим. Если то, что я пытаюсь сделать, неправильно, скажите мне, как мне сделать эту диаграмму похожей на диаграмму в реальном времени.