Angular-图表自定义

Question

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

这里是fiddle：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 轴与我在左侧的完全相同。如果我理解正确 http://www.chartjs.org/docs/latest/axes/cartesian/#axis-id 你可以为不同的数据集使用单独的 Y 轴，但这不是我想要的。

我还希望始终显示标签，不仅是当我将鼠标悬停在条形图上时，现在很难弄清楚每个条形图与什么相关......

Answer 1

您可以为 y-axis

的两侧定义自定义刻度

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
                      }
                                    ]
                        }
                    }

Angular-图表自定义

Angular-chart customization

angularjs

angular-chart