2016-10-04 38 views
2

我實現我的離子應用的角度折線圖的功能在https://jtblin.github.io/angular-chart.js/系列詳細介紹不在角度圖顯示與Charts.js

的圖表顯示成功的鏈接描述,但圖表下方的系列細節不顯示(意思哪個顏色代表哪條線)

我通過圖表系列字段,但仍然不顯示。 請注意。

這裏是 的index.html

<ion-content ng-controller="ExampleCtrl"> 
    <div class="card"> 
     <div class="item item-divider"> 
      This is a Line Chart 
     </div> 
     <div class="item item-text-wrap"> 
      <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-legend="true" 
      chart-dataset-override="datasetOverride" chart-click="onClick"> 
      </canvas> 
     </div> 
    </div>   
    </ion-content> 

這裏是我的app.js

angular.module('starter', ['ionic', 'chart.js']) 

.run(function($ionicPlatform) { 
$ionicPlatform.ready(function() { 
if(window.cordova && window.cordova.plugins.Keyboard) { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

    // Don't remove this line unless you know what you are doing. It stops the viewport 
    // from snapping when text inputs are focused. Ionic handles this internally for 
    // a much nicer keyboard experience. 
    cordova.plugins.Keyboard.disableScroll(true); 
} 
if(window.StatusBar) { 
    StatusBar.styleDefault(); 
} 
}); 
}) 

.controller("ExampleCtrl", function($scope){ 
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; 
$scope.series = ['Series A', 'Series B']; 
$scope.data = [ 
    [65, 59, 80, 81, 56, 55, 40], 
    [28, 48, 40, 19, 86, 27, 90] 
]; 

}); 

回答

10

你應該設置的傳說顯示真。這將解決您的問題

$scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; 
$scope.series = ['Series A', 'Series B']; 
$scope.options = { legend: { display: true } }; // missing 

$scope.data = [ 
    [65, 59, 80, 81, 56, 55, 40], 
    [28, 48, 40, 19, 86, 27, 90] 
]; 

希望這可以解決您的問題。謝謝

+0

謝謝...媽的,我應該正確地閱讀文檔。 –

+0

我希望文檔實際上包含了這個必需的配置,以爲我瘋了。 – Dan