2016-05-24 10 views
0

Ich versuche, diese c3 Winkel Diagramme zu verwenden, aber nichts scheint auf der Seite angezeigt werden. Es gibt keine Konsolenfehler, die ich finden kann, und ich habe dem Tutorial gefolgt, aber nichts erscheint noch.Kann nicht scheinen c3 Diagrammbibliothek eckig

Ich habe das Git Repo gezogen und referenzieren die Dateien, die ich glaube ich brauche.

Warum kann ich nichts sehen?

Charts:

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

Tutorial: http://jettro.github.io/c3-angular-directive/

Code:

<!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", []); 

Diagramm Controller:

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

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






}]); 

Antwort

0

Ich bin kein Experte auf diesem Gebiet, aber in der getting started section of the page you provided, heißt es

Sie haben die folgenden Bibliotheken und Sheet hinzuzufügen.

Und dann listet den folgenden Code ein:

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

Von dem, was ich sehe, Sie d3.min.js aufgenommen haben, angular.min.js, c3-angular.min.js, app.js aber NICHT c3.min.css und c3.min.js.
Ich würde Ihnen empfehlen, sie zu integrieren und wenn es dann immer noch nicht funktioniert, aktualisieren Sie Ihre Frage mit, wie das ging.

Verwandte Themen