Question

我正在尝试使用chart.js在javascript中制作图形。我在下面有此代码，但是当我运行它时页面为空。该代码是我在互联网上看到的一个示例，它说它无法识别javascrpt文件中的“生成”功能（它不会引发异常或错误，只是将“生成”字样标记为灰色，当我运行代码时什么也没显示）

这是html代码：

<!DOCTYPE html>
<html lang="en">


<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.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id ="myChart"></div>
<script><script src="lol.js"></script></script>
</body>
</html>

这是js代码：

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

setTimeout(function () {
    chart.load({
        columns: [
            ['data1', 230, 190, 300, 500, 300, 400]
        ]
    });
}, 1000);

setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, 150, 200, 300, 200, 100]
        ]
    });
}, 1500);

setTimeout(function () {
    chart.unload({
        ids: 'data1'
    });
}, 2000);

我该如何解决？我需要用javascript为我的项目做一个图，我试图找出一种方法。谢谢！

Answer 1

您似乎缺少了C3初始化代码的bindto部分：

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

我如何使用c3.js在javascript中制作图形

1 个答案: