如何使用 angular-chart.js 和 chart.js 创建水平滚动效果

Question

我正在使用 angular-chart.js (v1.1.1)，一个围绕 chart.js 的角度包装器（我相信 angular-chart.js 使用 chart.js v2.x），并且在创建水平滚动效果时遇到问题条形图中的条形开始变大。

我在其他地方看到了这个解决方案：http://jsfiddle.net/mbhavfwm/

但是：

1. 我不确定我是否可以像用户在此处使用angular-chart.js 那样访问底层图表元素
2. 我什至无法访问angular-chart.js 中的onAnimationComplete。
3. 使用这个解决方案似乎有点笨拙。有没有更好的方法在确保条形图可以水平滚动的同时不渲染 2 x 轴？

这是我目前的解决方案：我有 3 个包含 div，canvas 最终呈现在第 3 个包含 div 内，配置如下：

this.chartOptions = this.composeChartService.createChartOptions({
  title: ctrl.chartTitle,
  legend: {
    position: 'bottom'
  },
  responsive: true,
  maintainAspectRatio: true
});

这是玉：

mixin dynamic-chart(type)
  canvas(
    class=`chart chart-${ type }`
    title="$ctrl.chartId"
    chart-data="$ctrl.events" 
    chart-series="$ctrl.cities" 
    chart-labels="$ctrl.labels"
    chart-click="$ctrl.onClickBar"
    chart-options="$ctrl.chartOptions")

div.chart-wrapper(ng-switch="$ctrl.chartType")
  //- Bar chart
  div.chart-area-wrapper(ng-when="bar")
    div.chart-test
      +dynamic-chart('bar')

这是影响这些 div 的手写笔：

.chart-wrapper
  width: 800px
  overflow: auto  
  canvas
    background-color: white
    width: 100%

.chart-test
  width: 1200px !important
  background-color: yellow

这种解决方案可以使用水平滚动，但是条形的厚度太低，我不喜欢在不需要宽度时随意选择.chart-test div 的宽度。此外，此解决方案有时会隐藏标题和图例（取决于滚动的长度）。

那么，有没有更好的方法让angular.chart.js 与水平滚动配合得更好？

Answer 1

有一些 API 更改可用于 chart.js 的更高版本。

因此，例如，xScalePaddingLeft 之类的属性不再可用，并且

onAnimationComplete : function(){} 

现在是

animation: { onComplete : function(){} }

没有更好的方法 (IMO)，因为您确实需要独立的浮动 Y 轴，而 chart.js 不提供开箱即用的选项。

我已经重写了上面的示例以使用最新版本的angular-charts.js 和chart.js：

var app = angular.module("app", ["chart.js"]);

app.controller("LineCtrl", 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]
  ];
  $scope.onClick = function(points, evt) {
    console.log(points, evt);
  };
  $scope.datasetOverride = [{
    yAxisID: 'y-axis-1'
  }];
  $scope.options = {
    scales: {
      yAxes: [{
        id: 'y-axis-1',
        type: 'linear',
        display: true,
        position: 'left'
      }]
    },
    responsive: false,
    animation: {
      onComplete: function() {
        var sourceCanvas = this.chart.ctx.canvas;
        var copyWidth = this.chart.controller.chartArea.left - 5;
        // the +5 is so that the bottommost y axis label is not clipped off
        // we could factor this in using measureText if we wanted to be generic
        var copyHeight = this.chart.controller.chartArea.bottom + 5; // 282 //this.scale.endPoint + 5;

        var targetCtx = document.getElementById("myChartAxis").getContext("2d");
        targetCtx.canvas.width = copyWidth;
        targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);

      }
    }
  };
});

.chartWrapper {
  position: relative;
}

.chartWrapper>canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.chartAreaWrapper {
  width: 600px;
  overflow-x: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>

<div ng-app="app" ng-controller="LineCtrl">
  <div class="chartWrapper">
    <div class="chartAreaWrapper">
      <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick" width="1200" height="300"></canvas>
    </div>
    <canvas id="myChartAxis" height="300" width="0"></canvas>
  </div>
</div>

在 jsfiddle 中也是这样：https://jsfiddle.net/vfzyvg6z/1/

更新非滚动标题和图例：https://jsfiddle.net/vfzyvg6z/2/