为什么不出现C3图表？

Question

为什么不出现C3图表？

Lee*_*son 7 html javascript charts d3.js c3

我试图创建一个简单的图表,它只是不起作用.任何帮助都会很棒.我按照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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mr.*_*irl 7

首先,我会检查跨源异常.这通常是通过使用托管在其他网站上的脚本引起的.如果您遇到此类问题,请查找内容分发网络(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>

Run Code Online (Sandbox Code Playgroud)

DOM End的脚本(没有超时)

您还可以在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>

Run Code Online (Sandbox Code Playgroud)

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
    }
  }
});

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，3 月前
查看次数：	4600 次
最近记录：	10 年，3 月前