Question

我正在尝试重现一些代码来生成chart using c3。但是，此脚本不会呈现任何内容。为什么？（href中列出的文件位于同一文件夹中）

<!DOCTYPE html>
<html>
<head>
  <!-- Load c3.css -->
  <link href="c3.css" rel="stylesheet" type="text/css">

  <!-- Load d3.js and c3.js -->
  <script src="d3.v3.min.js" charset="utf-8"></script>
  <script src="c3.min.js"></script>

  <meta charset="UTF-8">
  <title>title </title>
</head>
<body>
  <div id="chart"></div>
  <script>
  var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
</script>
</body>

Answer 1

对于关注此主题的其他人，我建议您使用以下内容分发网络（CDN）资源来加载D3.js和C3.js库：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">  
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>

我加载了您的图表，但没有将这些资源编码到我的文档的<head>部分。

Answer 2

这是一个工作示例，因此如果未加载图表，可能是您没有正确引用库C3和D3。

如果缺少图书馆，请检查浏览器的网络控制台（Chrome here中的使用情况）。

检查以下步骤：

对于C3安装，请遵循指南：http://c3js.org/gettingstarted.html
对于D3，您可以使用源远程连接：http://d3js.org/d3.v3.min.js

使用c3可视化图表

2 个答案: