加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 使用Charts.js在Angular Chart中不显示系列详细信

发布时间:2020-12-17 18:00:58 所属栏目:安全 来源:网络整理
导读:我正在我的离子应用程序中实现Angular Line Chart功能,如链接 https://jtblin.github.io/angular-chart.js/中所述 图表显示成功,但不显示图表下方的系列详细信息(含义哪种颜色代表哪条线) 我正在通过图表系列字段,但仍未显示. 好心提醒. 这是 的index.html i
我正在我的离子应用程序中实现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]
 ];

});

解决方法

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

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

$scope.data = [
   [65,90]
];

希望这能解决你的问题.谢谢

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读