Dygraphs: Как установить значения dateWindow, используя JavaScript без ошибок визуализации диаграммы? - PullRequest
Новая
       16

Dygraphs: Как установить значения dateWindow, используя JavaScript без ошибок визуализации диаграммы?

0 голосов
/ 07 сентября 2018

Ниже приведены два сгенерированных изображения Dygraphs. Первое изображение Dygraphs отображается правильно. Второе изображение Dygraphs отображает неправильно. Мне нужно знать, если есть правильный способ написать HTML и JavaScript, чтобы заставить Dygraphs правильно отображать второе изображение при установке dateWindow с помощью кода JavaScript?

Голова и хвост моего csv-файла данных об акциях Apple Computer.

appl_adj.csv (заголовок файла данных): 

DATE,ADJ_HIGH,ADJ_LOW
1980-12-12,0.421248589155775,0.41949764247414395
1980-12-15,0.399507667858854,0.39761080895375395
1980-12-16,0.370179310941531,0.3684283642599
1980-12-17,0.379371781020095,0.37747492211499495

appl_adj.csv (хвост файла данных): 

2018-04-27,164.33,160.63
2018-04-30,167.26,161.84
2018-05-01,169.2,165.27
2018-05-02,177.75,173.8
2018-05-03,177.5,174.44

Следующий HTML-код создает изображение диаграммы Dygraphs, которое отображается правильно: 

<!doctype html>
<html lang="en">
  <head>
    <!-- Dygraphs CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" />
    <!-- Dygraphs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
  </head>
  <body>
    <div class="container">
        <!-- Dygraph Chart 1 -->
        <div id="graphdiv1"
          style="width:650px; height:400px;"></div>
        <script type="text/javascript">
          g1 = new Dygraph(
            document.getElementById("graphdiv1"),
            'appl_adj.csv', // path to CSV file
            {
              dateWindow: [ Date.parse("2016/05/03"), Date.parse("2018/05/03") ],
              showRangeSelector: true, rangeSelectorHeight: 30, title: "AAPL", legend: "always", // options
              series: {
               "ADJ_HIGH": {
                color: "blue",
                drawPoints: true,
                strokeWidth: 2,
                pointSize: 0
               },
               "ADJ_LOW": {
                color: "grey",
                drawPoints: true,
                strokeWidth: 2,
                pointSize: 0
               }
              }
            }
        );
        </script>
    </div>
  </body>
</html>

Диаграмма Dygraphs отображается правильно Dygraphs Chart Image Renders Correctly

Я изменяю HTML-код, основываясь на ответе на следующий вопрос:

dyGraphs DateWindow для анализа даты до конца CSV

Следующий HTML-код создает изображение диаграммы Dygraphs, которое отображается неправильно: 

<!doctype html>
<html lang="en">
  <head>
    <!-- Dygraphs CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" />
    <!-- Dygraphs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
   </head>
  <body>
    <div class="container">
        <!-- Dygraph Chart 1 -->
        <div id="graphdiv1"
          style="width:650px; height:400px;"></div>
        <script type="text/javascript">
          var g1 = new Dygraph(
            document.getElementById("graphdiv1"),
            'appl_adj.csv', // path to CSV file
            {
              series: {
               "ADJ_HIGH": {
                color: "blue",
                drawPoints: true,
                strokeWidth: 2,
                pointSize: 0
               },
               "ADJ_LOW": {
                color: "grey",
                drawPoints: true,
                strokeWidth: 2,
                pointSize: 0
               }
              }
            }
            );
          g1.ready(function () {
              var ends = g1.xAxisExtremes();
              g1.updateOptions({
              showRangeSelector: true, rangeSelectorHeight: 30, title: "AAPL", legend: "always", // options
              dateWindow: [ Date.parse("2016/05/03"), ends[1] ],
            }
        );}
        );
        </script>
    </div>
  </body>
</html>

Диаграмма Dygraphs отображается неправильно enter image description here

...