Question

当我运行以下代码时。我只是看到//用你的jQuery版本替换它。我尝试在开发人员工具中查找原因并查看错误“未捕获的引用错误：图表未定义”。有人可以帮忙吗？

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script src="/js/keylines.js"></script>
        <script src="/js/jquery-2.1.4.js"></script>//replace this with your jQuery version
        <link rel=" stylesheet" type="text/css" href="/css/keylines.css">
        <div id ="kl" style="width: 818px; height: 586px;"></div>
  <script>
    window.onload = function () {
        KeyLines.paths({
            assets: 'assets/',
            flash: {
                swf: 'swf/keylines.swf',
                swfObject: 'js/swfobject.js',
                expressInstall: 'swf/expressInstall.swf'
            }
        });
                $.ajax({
            type: "GET",
            url: "JSONFile.json",
            dataType: "json",
            success: function (json) {
                ParseJSONData(json, chart);
            }
        });
        function ParseJSONData(obj, chart) {
            // Set up the properties of the chart data object
            var chartData = {
                type: 'LinkChart',
                items: []
            };

            // Convert the loaded object to KeyLines chart format - first the nodes
            for (var i = 0; i < obj.nodes.length; i++) {
                var node = obj.nodes[i];
                // Push node object in KeyLines format onto the items array
                chartData.items.push({
                    id: node.id,
                    type: 'node',
                    t: node.name,
                    c: node.color
                });
            }

            // Now add items for the links
            for (var j = 0; j < obj.links.length; j++) {
                var link = obj.links[j];
                // Push link object in KeyLines format onto the items array
                chartData.items.push({
                    id: link.id,
                    type: 'link',
                    id1: link.from,
                    id2: link.to,
                    w: link.strength   // Use the strength property to set the link width
                });
            }

            // Load the data into the chart, and then perform a layout
            chart.load(chartData, chart.layout);
        }
    };

</script>
  </body>

</html>

以下是JSONFile.json 这是代码{

中提到的JSONFile.json

  "nodes": [
  {
      "id": "1",
      "name": "Charles",
      "color": "blue"
  },
  {
      "id": "2",
      "name": "Grace",
      "color": "black"
  },
  {
      "id": "3",
      "name": "Stephen",
      "color": "red"
  },
  {
      "id": "4",
      "name": "Carlos",
      "color": "green"
  }
  ],
  "links": [
  {
      "id": "5",
      "from": "1",
      "to": "4",
      "strength": "4"
  },
  {
      "id": "6",
      "from": "4",
      "to": "3",
      "strength": "1"
  },
  {
      "id": "7",
      "from": "2",
      "to": "4",
      "strength": "10"
  },
  {
      "id": "8",
      "from": "2",
      "to": "3",
      "strength": "1"
  }
  ]

}

Answer 1

您的代码中存在两个问题：

1）代码不是使用KeyLines创建任何图表，只是设置路径

KeyLines.create( 'element-id', callback);

在你的情况下，我会说在一个函数中包装AJAX调用并将函数名称作为回调。

2）var chart函数中缺少ParseJSON变量。

如需进一步的问题，请联系KeyLines支持。

（注意：我在KeyLines团队中）

未定义的未捕获参考错误图表

1 个答案: