2016-02-02 217 views
1

我以下示例爲「http://jsfiddle.net/pablojim/cp73s/」,但在我的應用程序餅圖中未顯示。我沒有使用jquery。highcharts-ng不顯示餅圖

_______ app.js _____

var app = angular.module('abc', [ 
    'highcharts-ng' 
]); 
state('app.graph', { 
     url: '/graph', 
     templateUrl: appHelper.templatePath('app/graph/piechart'), 
     controller: 'graphCtrl' 
    }). 

______controller____

angular.module('abc').controller('graphCtrl', function ($scope) { 
    $scope.highchartsNG = { 
    options: { 
     chart: { 
     type: 'pie' 
     } 
    }, 
    series: [{ 
     data: [20, 20, 12, 8, 7] 
    }], 
    title: { 
     text: 'Hello' 
    }, 
    loading: false 
    } 
}); 

____ ____的index.html

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script> 
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script> 
<script src="bower_components/highcharts-ng/dist/highcharts-ng.min.js"></script> 

_____ pie.html _____

[.... 
    <highchart id="chart1" config="highchartsNG"></highchart> 
....][1] 
+0

是否有在控制檯的任何錯誤? –

+0

它顯示帶圖表標題的空白頁面 – NG51214

+0

您的選項(如'series'或'title')應放置在'options'中。現在你的圖表正在渲染正確,但你根本沒有設置任何**選項。 –

回答

2

我想你錯過了一個文件。 就包括"highstock.js"上述highcharts-ng.js

希望這將解決您的問題..

var myapp = angular.module('myapp', ["highcharts-ng"]); 

angular.module('myapp').controller('graphCtrl', function ($scope) { 
    $scope.highchartsNG = { 
    options: { 
     chart: { 
     type: 'column' 
     } 
    }, 
    series: [{ 
     data: [20, 20, 12, 8, 7] 
    }], 
    title: { 
     text: 'Hello' 
    }, 
    loading: false 
    } 
}); 

爲您創建小提琴... http://jsfiddle.net/anilram25/nfg8kqkn/1/

+0

我收錄了「highstock.js」,仍然無法正常工作 – NG51214

+0

檢查小提琴鏈接... –