我无法让 Epoch Charts 显示输出

Question

我正在尝试创建一个显示一些相当简单数据的仪表板。我以为最简单的方法就是使用网页和图表工具，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>

Answer 1

根据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>

我无法让 Epoch Charts 显示输出

I cannot get Epoch Charts to display output

javascript

html

jquery

epoch.js