角图定制

Question

我正在使用AngularJS v1.6.6和angular-chart v.1.1.1在我的应用程序中显示图表。

这是小提琴： https : //jsfiddle.net/elenat82/w9gs3fqt/3/

这是代码：

HTML：

<div class="container" ng-app="app" ng-controller="ChartCtrl">
<div class="row">
    <div class="col-md-6">
        <canvas 
        id="base" 
        class="chart-base" 
        chart-data="datas" 
        chart-labels="labelsdata" 
        chart-series="series" 
        chart-type="type" 
        chart-options="options">
        </canvas>
    </div>

</div>

JS：

angular.module("app", ["chart.js"])
.controller("ChartCtrl", function($scope) {

$scope.datas = [
                [132],
                [170],
                [2.50],
                [45.67],
                [154],
                [89],
                [111],
                [160],
                [94]
            ];
$scope.labelsdata = ["today"];
$scope.series = ["label1", "label2", "label3", "label4", "label5", "label6", "label7", "label8", "label9"];
if ($scope.labelsdata.length > 1) {
    $scope.type = 'line';
} 
else {
    $scope.type = 'bar';
}
$scope.options = {
            scales: {
                yAxes: [
                {id: 'y-axis-1',
                 type: 'linear', 
                 display: true,
                 position: 'left'},
                {id: 'y-axis-2',
                  type: 'linear' ,
                  display: true,
                  position: 'right'}
                    ]
                    }
                }

});

我想做的是在图表的两侧以相同的比例显示相同的Y轴，现在左边的Y轴可以，但是右边的Y轴显示出奇怪的值。...我希望右边的Y轴成为我在左侧完全一样。 如果我正确理解了此http://www.chartjs.org/docs/latest/axes/cartesian/#axis-id ，则可以将单独的Y轴用于差异数据集，但这不是我想要的。

我也希望总是显示标签，不仅是当我将条形图悬停时，现在很难弄清楚每个条形与....有什么关系。

Answer 1

您可以为y轴的两侧定义自定义刻度

https://jsfiddle.net/w9gs3fqt/13/

 var axis_ticks = {
       beginAtZero: true,
       max:200,
       min: 0,
       stepSize: 50
    };
    $scope.options = {
                scales: {
                    yAxes: [
                    {id: 'y-axis-1',
                     type: 'linear', 
                     display: true,
                     position: 'left',
                     ticks:axis_ticks
                     },
                    {id: 'y-axis-2',
                      type: 'linear' ,
                      display: true,
                      position: 'right',
                      ticks:axis_ticks
                      }
                                    ]
                        }
                    }