Stack Overflow Snippet

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>

Stack Overflow Snippet

这是一个工作示例。确保您的路径与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图表？

1 个答案:

HEAD中的脚本（使用超时）

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

Stack Overflow Snippet