Question

你好

＆＃13;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>College student data</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>    
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
   

    <script>
        var myApp = angular.module('myApp', []);
        myApp.controller('myController', ['$scope', '$http', function($scope,$http) {

                $scope.trickInterval = {};
                $scope.showGraphs = function() {

                    $http.get('latestdata.json').then(
                        function(response) {
                            $scope.graphData = [];
                            $scope.xtype = 'category';
                            for (i = 0; i < response.data.graphData.length; i++) {
                                for (j = 0; j < response.data.graphData[i].graphPoints.length; j++) {
                                    for (k = 0; k < response.data.graphData[i].graphPoints[j].data.length; k++) {
                                        response.data.graphData[i].graphPoints[j].data[k][0] = moment(response.data.graphData[i].graphPoints[j].data[k][0]).valueOf();
                                    }
                                }
                                if (response.data.graphData[i].type === "spline") {
                                    $scope.xtype = 'datetime';

                                }
                                $scope.graphData.push({
                                    "dataList": response.data.graphData[i]
                                });
                                console.log(JSON.stringify($scope.graphData[i]));
                            }

                        });
                };



            }]),
            myApp.directive('myGraph', function() {
                return {
                    restrict: 'E',
                    replace: true,
                    scope: {
                        data: '@',
                        type: '@',
                        index: '@',
                        title: '@',
                        xname: '@',
                        yname: '@',
                        xtype: '@'
                    },
                    templateUrl: '',
                    link: function(scope, element, attrs) {
                        element.children().css('border', '1px solid red');
                        element.children().css('padding', '100px');
                    },
                    controller: ['$scope', '$element', '$http', function($scope, $element, $http) {
                        var graphFinalData = JSON.parse($scope.data);
                        var min1;
                        var min2;
                        var temp;
                        if (!angular.isDefined($scope.type) || $scope.type === null) {
                            $scope.type = 'spline';
                        }

                       
                        var diff = min2 - min1;
                        var yMinValue = min1 - diff > 0 ? min1 - diff : min1;

                        var dataLength = JSON.parse($scope.data)[0].data.length;
                       
                        if (dataLength > 30) {
                            $scope.trickInterval = Math.round(dataLength / 30);
                        }                       
                        var graphId = "graph" + $scope.index;
                        $('#container').append("<div id=" + graphId + ">");

                        $("#" + graphId).highcharts({
                          
                            chart: {
                                type: $scope.type,
                                zoomType: 'xy'
                            },
                            title: {
                                text: $scope.title
                            },
                            subtitle: {                                
                                text: '<div h1>' + 'x' + '</h1><br/><p>' + '20' + '</p></div>'+'<div><h1>' + 'x' + '</h1><br/><p>' + '20' + '</p></div>'
                            },
                            labels: {
                                //useHTML: true,
                            },
                             xAxis: {

                                tickInterval: $scope.trickInterval,
                                allowDecimals: false,
                                labels: {
                                    formatter: function() {
                                        if ($scope.type == "spline") {
                                            return moment(this.value).format("DD-MMM-YYYY HH:MM");
                                        } else {
                                            return this.value;
                                        }
                                    },
                                    rotation: -60,
                                     useHTML: true,
                                },
                                title: {
                                    text: $scope.xname
                                },
                                type: $scope.xtype,
                                //type: 'category',
                                minRange: 0
                            },
                            yAxis: {
                                title: {
                                    text: $scope.yname
                                }
                            },
							plotOptions: {
                                spline: {
                                    marker: {
                                        enabled: true
                                    }
                                }
                            },
                            //series: graphFinalData
                            series: JSON.parse($scope.data)
                        });


                    }]
                }
            })

    </script>
</head>

<body ng-app='myApp'>

    <div id="container">Hi Akash</div>
    <div ng-controller='myController' class="row">
        <button ng-click="showGraphs()">Print Graph</button>
        <my-graph data={{p.dataList.graphPoints}} index={{$index}} type={{p.dataList.type}} title={{p.dataList.title}} xname={{p.dataList.xName}} yname={{p.dataList.yName}} xtype={{xtype}} data-ng-repeat="p in graphData">
        </my-graph>


    </div>
</body>

</html>

＆＃13;

当我绘制图表时，显示大部分点都是重叠的。请帮助或指导解决这个问题。当数据越来越少时，当数据越多时，它就会被完美地绘制出来，显示的是重叠的重叠

highcharts大多数点都是重叠的

0 个答案: