Question

我正在我的离子应用程序中实现Angular Line Chart功能，如链接https://jtblin.github.io/angular-chart.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]
 ];

});

Answer 1

您应该将图例设置为true。这将解决您的问题

$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]
];

希望这可以解决您的问题。谢谢

系列详细信息未显示在带有Charts.js的角度图表中

1 个答案: