Angular-chart.js不在Y轴上显示单位

时间:2017-06-14 08:37:51

标签: javascript angularjs charts chart.js

我有一个图表,使用angular-chart.js,其中x和y轴的值会根据用户点击的项目而有所不同。单击其中一个项目时,它会省略第一个单元,因此不显示2.52,而是显示.52。如果您在下面看到,日志显示正确的信息,只是不显示它。 error with chart.js graph

我提供上面链接的网站提供了我所遵循的示例,我有点难过为什么会发生这种情况。使用正确的数据弹出图表的代码非常冗长,但我会尝试仅提供必要的代码。

为什么没有正确的值显示在Y轴上的任何想法?

收集图表数据的服务

app.factory('loadPatentItemService', ['$http', '$timeout', function($http, $timeout) {

    var factory = {};

        var selectedData = null;
        var selectedLabel = null;
        var selectedItem = null;
        var REST_SERVICE_URI = '../json/cost-data.json';

        //function is invoked from the view and data is passed depending which item was clicked

        factory.select = function(item) { 
            selectedItem = item;
            factory.getPatent();
            return [selectedItem];
        }

        factory.getPatent =  function() {
            var itemId = [];
            itemId.push(selectedItem.id)

            $http.get(REST_SERVICE_URI)
            .then(function(response){

                var items = response.data.dataset; 

                var graphData = [];
                var graphLabel = [];

                for (i = 0;i < items.length; i++) {
                    if(items[i].id == itemId) {

                        graphData.push(items[i].data);
                        graphLabel.push(items[i].label);
                        factory.graphLabel(graphLabel);
                        factory.graphData(graphData);
                    }
                }    
            }), 
            function(errResponse) {
                console.log('error')
            }

            return selectedItem;

        }

        factory.graphData = function(data) {
            selectedData = data;
            return [data];
        }

        factory.graphLabel = function(label) {
            selectedLabel = label;
            return [label];
        }

        factory.getData = function() {
            return selectedData;
        }

        factory.getLabel = function() {
            return selectedLabel;
        }        

    return factory;

}])

图形控制器

app.controller("lineCtrl", ['$scope', '$timeout', 'loadPatentItemService', function ($scope, $timeout, loadPatentItemService) {

    var initGraph = loadPatentItemService.getPatent();
    var getGraphData = loadPatentItemService.getData();
    var getGraphLabel = loadPatentItemService.getLabel();

    $scope.labels = getGraphLabel[0];
    $scope.data = getGraphData[0];
    console.log(getGraphData[0], getGraphLabel[0])

    $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
    $scope.options = {
        scales: {
            yAxes: [
                {
                  id: 'y-axis-1',
                  type: 'linear',
                  display: true,
                  position: 'left'
                },
                {
                  id: 'y-axis-2',
                  type: 'linear',
                  display: true,
                  position: 'right'
                }
            ]
        }
    };
}])

0 个答案:

没有答案