Нарисуйте постоянную линию в angular-chart.js - PullRequest
Новая
       11

Нарисуйте постоянную линию в angular-chart.js

0 голосов
/ 26 декабря 2018

Мне нужно нарисовать постоянную линию на моем графике.Я использую "angular-chart.js".

Это мой раздел HTML 

                <canvas 
                        id="line" 
                        class="chart chart-line"
                        chart-data="dataCPC"
                        chart-labels="labelsCPC" 
                        chart-series="seriesCPC"
                        chart-options="optionsCPC"
                        chart-dataset-override="datasetOverride"
                        >
                </canvas>

Это мой угловой код 

  angular.module("app", ["chart.js"]).controller("LineCtrl", function 
   ($scope, $http) {
     var request = {
      method: 'get',
    url: 'asp/data.asp',
    dataType: 'json',
    contentType: "application/json"
   };
  $scope.arrLabelsACI = new Array;
  $scope.arrDataACI = new Array;
  $scope.dataACI = new Array;
  $scope.labelsACI = new Array;
   $http(request)
        .success(function (jsonData) {
            // LOOP THROUGH DATA IN THE JSON FILE.
            angular.forEach(jsonData, function (item) {
                //$scope.arrSeriesACI.push(item.TX_Total);
                $scope.arrDataACI.push(item.AVG);
                $scope.arrLabelsACI.push(item.HOUR);
            });
            // UPDATE SCOPE PROPERTIES FOR DATA.
            $scope.dataACI.push($scope.arrDataACI.slice(0));
            for (var i = 0; i < $scope.arrLabelsACI.length; i++) {
                $scope.labelsACI.push($scope.arrLabelsACI[i]);
            }
        })
        .error(function () {
        });
  $scope.datasetOverride = [{yAxisID: 'y-axis-1'}, {yAxisID: 'y-axis-2'}];
  $scope.optionsACI = {
    scales: {
        yAxes: [
            {
                id: 'y-axis-1',
                type: 'linear',
                display: true,
                position: 'left',
                suggestedMin: 0,
                ticks: {
                    min: 0
                }
            }
        ]
    }
 };

});

Вот как этоработает прямо сейчас

https://i.screenshot.net/2e9pyf0

Это то, что мне нужно.

https://i.screenshot.net/30lg5sr

Большое спасибо

1 Ответ

0 голосов
/ 09 января 2019

наконец-то я нашел решение

добавить chartjs-plugin-annotation.js 

<script src="js/chartjs-plugin-annotation.js"></script>

тогда эта часть и все. 

annotation: {
               annotations: [{
                       id: 'a-line-1',
                       type: 'line',
                       mode: 'horizontal',
                       scaleID: 'y-axis-1',
                       value: '5',
                       borderColor: 'red',
                       borderWidth: 1
                   }

Этокод опции 

 $scope.optionsACI = {
    scales: {
        yAxes: [
            {
                id: 'y-axis-1',
                type: 'linear',
                display: true,
                position: 'left',
                suggestedMin: 0,
                ticks: {
                    min: 0
                }
            }
        ]
    },
    annotation: {
            annotations: [{
                    id: 'a-line-1',
                    type: 'line',
                    mode: 'horizontal',
                    scaleID: 'y-axis-1',
                    value: '5',
                    borderColor: 'red',
                    borderWidth: 1
                }

    ]
            }


        };

Надеюсь, это поможет кому-нибудь однажды.

...