Блог

Главная - Вопросы по программированию - Я не могу получить диаграммы эпох для отображения выходных данных

Я не могу получить диаграммы эпох для отображения выходных данных

#javascript #html #jquery #epoch.js

#javascript #HTML #jquery #epoch.js

Вопрос:

Я пытаюсь создать панель мониторинга, которая показывает некоторые довольно простые данные. Я подумал, что самым простым способом было бы использовать веб-страницу и инструмент построения графиков, диаграммы эпох показались хорошим выбором.

Я установил все соответствующие зависимости и следовал инструкциям.

Когда я создаю HTML-страницу, я не получаю никаких ошибок, но я не получаю диаграмму (просто пустая страница). Я использую локальный хост на Apache.

Я перепробовал много разных способов сделать это, я просто не могу понять, почему я вообще ничего не получаю. Я использовал npm для установки jQuery, D3, epoch и т.д. в соответствующем каталоге сайта.

Вот мой код:

 <!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
  <script src="js/d3.min.js"></script>
  <script src="js/epoch.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/epoch.min.css">

</head>

<body>
  <div id="area" class="epoch category10" style="height: 200px;"></div>
  <script>
    var data = [{
        label: 'Layer 1',
        values: [{
          x: 0,
          y: 0
        }, {
          x: 1,
          y: 1
        }, {
          x: 2,
          y: 2
        }]
      },
      {
        label: 'Layer 2',
        values: [{
          x: 0,
          y: 0
        }, {
          x: 1,
          y: 1
        }, {
          x: 2,
          y: 4
        }]
      }
    ];

    var areaChartInstance = $('#area').epoch({
      type: 'area',
      data: data,
      axes: ['left', 'right', 'bottom']
    });
  </script>

</body>

</html>

Ответ №1:

Согласно списку изменений эпохи, текущая версия (0.8.4) была выпущена 30 октября 2015 года. Следовательно, проблема должна быть связана с неправильными версиями библиотек, от которых она зависит.

Epoch package.json указывает, от чего зависит библиотека d3 v3.4.13 . Если вы действительно хотите использовать Epoch , убедитесь, что используете d3 v3 , так же, как я сделал с вашим кодом ниже.

 var data = [
  {
    label: 'Layer 1',
    values: [{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 2 }]
  },
  {
    label: 'Layer 2',
    values: [{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 4 }]
  }
];

var areaChartInstance = $('#area').epoch({
  type: 'area',
  data: data,
  axes: ['left', 'right', 'bottom']
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/css/epoch.css">
<div id="area" class="epoch" style="height: 200px;"></div>