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脚本源切换到最新版本的链接......

谢谢安迪，我愚蠢！

<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，甚至不能按照教程进行操作

2 个答案: