2016-05-24 2 views
0

Я пытаюсь использовать эти угловые диаграммы c3, но на странице ничего не появляется. Нет никаких ошибок консоли, которые я могу найти, и я следил за учебником, но ничего не появляется.Невозможно загрузить библиотеку c3 chart angular

Я потянул 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="[email protected]" 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", []); 

Chart Controller:

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

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






}]); 

ответ

0

Я не эксперт по этому вопросу, но в 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.jsapp.js, но НЕ c3.min.css и c3.min.js.
Я бы посоветовал вам попробовать включить их, и если он все равно не работает, обновите свой вопрос, как это произошло.

Смежные вопросы