Question

我试图使用这些c3角度图表，但似乎没有任何东西出现在页面上。这些都没有我能找到的控制台错误，而且我已经按照教程进行了操作，但似乎没有任何错误。

我已拉出git repo并引用我认为需要的文件。

为什么我看不到任何东西？

图表：

https://github.com/jettro/c3-angular-directive

教程： http://jettro.github.io/c3-angular-directive/

代码：

<!DOCTYPE html>
<html ng-app="chart_test" xmlns="http://www.w3.org/1999/html">

  <head>


  </head>

  <body ng-controller="ChartController">
    <h1>Line Graph</h1>
      <div id="chart1"></div>
      <c3chart bindto-id="chart1" show-labels="true">
        <chart-column column-id="line1"
                      column-name="Line 1"
                      column-color="green"
                      column-values="30,200,100,400,150,250"
                      column-type="line"/>
        <chart-points point-radius="5"
                      show-point="true"
                      point-expand-enabled="true"
                      point-expand-radius="10"/>
    </c3chart>
    <script src="d3.min.js"></script>
    <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script src="c3-angular.min.js"></script>
    <script src="app.js"></script>
    <script src="ChartController.js"></script>




  </body>

</html>

App.js：

var app = angular.module("chart_test", []);

图表控制器：

var myApp = angular.module("chart_test");

myApp.controller("ChartController", ["$scope", function($scope){
  $scope.message = "hi";






}]);

Answer 1

我不是这方面的专家，但在getting started section of the page you provided，它说

您必须添加以下库和样式表。

然后列出以下代码：

<link href="css/c3.min.css" rel="stylesheet" type="text/css"/>

<script src="js/d3.min.js" charset="utf-8"></script>
<script src="js/c3.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/c3-angular.min.js"></script>

<script src="js/app.js"></script>

从我看到的内容，您加入了d3.min.js，angular.min.js，c3-angular.min.js，app.js，但不包括c3.min.css和c3.min.js。
我建议你尝试包括它们，如果它仍然不起作用，请更新你的问题。

似乎无法加载c3图表库角度

1 个答案: