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() и получил эту диаграмму

Я думаю автоматически переместить кисть слева направо, чтобы диаграмма выглядела как движущаяся [как в диаграммах реального времени], но я не понимаю, как это сделать. пожалуйста, помогите мне разобраться с этим. Если то, что я пытаюсь сделать, неправильно, скажите мне, как мне сделать эту диаграмму похожей на диаграмму в реальном времени.

0 ответов

Другие вопросы по тегам