Question

您好我已经使用公共数据创建了一个示例图表，但是它有更多数据要显示在图表中，因此我尝试沿x轴添加滚动条，以便整齐地显示所有数据。但是我发现很难将滚动条添加到x轴，因此如何向图表添加滚动条。我附上了一个plnkr供观看。请帮帮我。谢谢你:)。

控制器：

var myApp = angular.module('app',["chart.js"]);
myApp.controller("chartController",function($scope,$http){
$scope.totalDocks = [];
$scope.availDocks =[];
 $http.get("http://citibikenyc.com/stations/json")
.then(function(item){
    var dataFetched = item;
    console.log(dataFetched.data.stationBeanList[0]);
       for(var i=0; i < 100 ; i++){              
                   $scope.totalDocks.push(dataFetched.data.stationBeanList[i].totalDocks);
          $scope.availDocks.push(dataFetched.data.stationBeanList[i].availableDocks);
       }
 })
})

Plunker File

Answer 1

由于angular.chart本身是响应式的，因此您不必手动添加滚动条，而是为了使图表显示为粗略，您可以沿x轴跳过。

将此添加到您的选项配置

 $scope.options = {
    scales: {
      xAxes: [{
        ticks: {
          autoSkipPadding: 100
        }
      }]
    },
    responsive: true,
    maintainAspectRatio: true

  };

<强> DEMO

如何在图表

1 个答案: