时间戳

首页 > 解决方案 > 我无法让 Epoch Charts 显示输出

javascript - 我无法让 Epoch Charts 显示输出

问题描述

我正在尝试创建一个显示一些相当简单数据的仪表板。我认为最简单的方法是使用网页和图表工具，Epoch Charts 似乎是一个不错的选择。

我已经安装了所有相关的依赖项并按照说明进行操作。

当我创建 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>

标签： javascripthtmljqueryepoch.js

解决方案

根据Epoch Changelog，当前版本（0.8.4）已于 2015 年 10 月 30 日发布。因此，该问题必须与它所依赖的库版本不正确有关。

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>

推荐阅读