dygraph：同步示例答案

【问题标题】：dygraph: synchronization exampledygraph：同步示例
【发布时间】：2015-09-15 05:09:35
【问题描述】：

我是一名生物工程师，我不得不承认我没有使用 js 的经验。我正在使用 Dygraph 创建一些图表，我需要同步它们的缩放，所以我查看了图库中的示例“同步”。它说我必须在您的页面上获取 extras/synchronizer.js。当我点击它时，我最终会进入一个页面，上面写着：404 这不是您要查找的页面。

另一个问题，当我创建图表时，我收到此错误通知：

XMLHttpRequest 无法加载文件：///C:/xampp/htdocs/programs/progettoprovaG/averageV.csv。叉源请求仅支持协议方案：http、data、铬，铬扩展，https，铬扩展资源。 dygraph-combined-dev.js:5428 Uncaught NetworkError: 无法执行 “XMLHttpRequest”上的“发送”：加载失败 'file:///C:/xampp/htdocs/programs/progettoprovaG/averageV.csv'。

顺便说一下，这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
    <script type="text/javascript"
    src="dygraph-combined-dev.js"></script>
</head>
<body>
    <div id="div_average_breath_volume" style="width:600px; height:300px;"></div>
    <div id="div_average_breath_impedence" style="width:600px; height:300px;"></div>
    <script type="text/javascript">
    $(document).ready(function () {
        var highlight_start = 55;
        var highlight_end = 65;

        // grafico del volume + sd
        v = new Dygraph(
                document.getElementById("div_average_breath_volume"),
        "averageV.csv",
        {
            labelsDivStyles: { 'textAlign': 'right' },
            labels: ["s","L"],
            errorBars: true,
            title: 'average breath', 
            ylabel: 'volume [L]',
            xlabel: 'time [s]',
            animatedZooms: true,
            underlayCallback: function(canvas, area, v) {
                var bottom_left = v.toDomCoords(highlight_start);
                var top_right = v.toDomCoords(highlight_end);
                var left = bottom_left[0];
                var right = top_right[0];
                canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
                canvas.fillRect(left, area.y, right - left, area.h);
            }
        }
                );
        z = new Dygraph(
                document.getElementById("div_average_breath_impedence"),
        "averageZ.csv",
        {
            errorBars: true,
            labelsDivStyles: { 'textAlign': 'right' },
            legend: 'always',
            labels: ["s","R","X"],
            ylabel: 'impedence [L]',
            xlabel: 'time [s]',
            animatedZooms: true,
            underlayCallback: function(canvas, area, z) {
                var bottom_left = z.toDomCoords(highlight_start);
                var top_right = z.toDomCoords(highlight_end);
                var left = bottom_left[0];
                var right = top_right[0];
                canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
                canvas.fillRect(left, area.y, right - left, area.h);
            }
        }
                );     
    }
            );
        </script>
</body>

当我尝试简单地执行 Dygraph 库中的示例时，会发生类似的情况：

加载资源失败：net::ERR_FILE_NOT_FOUND dygraph-combined-dev.js:5428 XMLHttpRequest 无法加载文件：///C:/xampp/htdocs/programs/progettoprovaG/twonormals.csv。叉源请求仅支持协议方案：http、data、铬，铬扩展，https，铬扩展资源。 dygraph-combined-dev.js:5428 Uncaught NetworkError: 无法执行 “XMLHttpRequest”上的“发送”：加载失败 'file:///C:/xampp/htdocs/programs/progettoprovaG/twonormals.csv'。

谁能帮帮我？

【问题讨论】：

标签： javascript dygraphs

【解决方案1】：

修复跨域请求您需要提供文件，例如，运行

python -m SimpleHTTPServer 8000

在您的代码所在的目录中，并打开

localhost:8000

在您的浏览器中

【讨论】：

【解决方案2】：

我刚刚发现了 Dygraphs 和同步器并开始使用它们。我遇到了与您找到工作 synchronizer.js 相同的问题并找到了一个工作但有一点问题的问题。在 Stackoverflow 和 Github 上搜索了一个小时，我终于可以纠正这个错误，现在它看起来就像一个魅力！

在my test page，你可以从我的测试例子中下载。

无法帮助您解决第二个问题...抱歉。

【讨论】：