想用Fastly的Epoch Charts，连教程都学不会

Question

我之前在 javascript 和 html 中做过一些很酷的事情，但我做的还不够多，看不出我在这里遗漏了什么。我确定这是我忘记或做错的相当简单的事情。

对于即将开展的工作项目，我想使用 Fastly 的 Epoch 图表，我正在努力尝试，但我无法生成一个简单的图表。这里的代码刚取自 Epoch's Getting Started page，我已经下载了除 jquery 之外的所有脚本... 我不明白为什么它不起作用？非常感谢任何答案。

<!DOCTYPE html>
<html lang="en-US">
  <head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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

只需将下载的 d3 脚本源切换到 link 最新版本...

谢谢安迪，我很笨！

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Answer 2

很好。

<script src="http://code.jquery.com/jquery-2.1.3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="js/epoch.min.js"></script>


<link rel="stylesheet" type="text/css" href="css/epoch.min.css">


<script>
    var barChartData = [
        // First bar series
        {
            label: 'Series 1',
            values: [
                {x: 'A', y: 30},
                {x: 'B', y: 10},
                {x: 'C', y: 12},
            ]
        },
        // Second series
        {
            label: 'Series 2',
            values: [
                {x: 'A', y: 20},
                {x: 'B', y: 39},
                {x: 'C', y: 8},
            ]
        },

        {
            label: 'Series 3',
            values: [
                {x: 'A', y: 15},
                {x: 'B', y: 49},
                {x: 'C', y: 6},
            ]
        }
    ];
</script>


<div id="barChartData" class="epoch category10" style="width: 800px; height: 200px"></div>
<script>
    $('#barChartData').epoch({
        type: 'bar',
        data: barChartData
    });
</script>

您将不得不更改链接。这很简单，虽然一开始我遇到了一些问题。我想放在 jsfiddle.net 但我无法指向 github 上的 js 和 css 文件我不知道为什么..所以我刚刚放了代码。希望这有帮助

想用Fastly的Epoch Charts，连教程都学不会

Trying to use Epoch Charts by Fastly, can't even follow the tutorial

javascript

jquery

html

charts

epoch