为什么 C3 图表没有出现？

Question

我正在尝试创建一个简单的图表，但它不起作用。任何帮助都会很棒。我按照 C3.js 文档网站上的说明进行操作，但我仍然看到空白页。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>

<script>
var chart = c3.generate({
bindto: '#chart',
data: {
  columns: [
    ['data1', 30, 200, 100, 400, 150, 250],
    ['data2', 50, 20, 10, 40, 15, 25]
  ]
}
});

</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>

Answer 1

首先，我会检查跨源异常。这通常是由于使用托管在其他网站上的脚本造成的。如果您遇到此类问题，请寻找 Content Delivery Network (CDN)。这些站点托管可以在任何网站上运行的脚本。

但我认为您的问题是您在文档加载完成之前运行宁JavaScript 代码。有两种方法可以确保在开始对 DOM.

执行 JavaScript 之前加载元素

HEAD 中的脚本（使用超时）

您的 HTML 页面的源代码应如下所示。您需要先等待元素加载。这利用了纯 JavaScript 而不需要 jQuery.

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
    
    <script type="text/javascript">
      onReady('#chart', function() {
        var chart = c3.generate({
          data: {
            columns: [
              ['data1', 300, 350, 300, 0, 0, 0],
              ['data2', 130, 100, 140, 200, 150, 50]
            ],
            types: {
              data1: 'area',
              data2: 'area-spline'
            }
          },
          axis: {
            y: {
              padding: {
                bottom: 0
              },
              min: 0
            },
            x: {
              padding: {
                left: 0
              },
              min: 0,
              show: false
            }
          }
        });
      });
      
      // Set a timeout so that we can ensure that the `chart` element is created.
      function onReady(selector, callback) {
        var intervalID = window.setInterval(function() {
          if (document.querySelector(selector) !== undefined) {
            window.clearInterval(intervalID);
            callback.call(this);
          }
        }, 500);
      }
    </script>
  </head>
  <body>
    <div id="chart"></div>
  </body>
</html>

脚本在 DOM 结束（没有超时）

您还可以运行 chart 元素之后的脚本。此脚本将保证运行，因为目标对象#chart已经被浏览器解析并加载

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
  </head>
  <body>
    <div id="chart"></div>

    <script type="text/javascript">
      var chart = c3.generate({
        data: {
          columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
          ],
          types: {
            data1: 'area',
            data2: 'area-spline'
          }
        },
        axis: {
          y: {
            padding: {
              bottom: 0
            },
            min: 0
          },
          x: {
            padding: {
              left: 0
            },
            min: 0,
            show: false
          }
        }
      });
    </script>
  </body>
</html>

堆栈溢出代码段

这是一个工作示例。确保您的 D3 和 C3 文件路径正确。

var chart = c3.generate({
  data: {
    columns: [
      ['data1', 300, 350, 300, 0, 0, 0],
      ['data2', 130, 100, 140, 200, 150, 50]
    ],
    types: {
      data1: 'area',
      data2: 'area-spline'
    }
  },
  axis: {
    y: {
      padding: {
        bottom: 0
      },
      min: 0
    },
    x: {
      padding: {
        left: 0
      },
      min: 0,
      show: false
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />

<div id="chart"></div>

为什么 C3 图表没有出现？

Why isn't the C3 Chart appearing?

html

javascript

charts

d3.js

c3

HEAD 中的脚本（使用超时）

脚本在 DOM 结束（没有超时）

堆栈溢出代码段