Angular-chart.js - aby wykres liniowy nie krzywa

Question

Używam dyrektywy wykresu liniowego z Angular-Chart.js (at https://jtblin.github.io/angular-chart.js/#line-chart).

Jak widać na powyższym łączu, wykres liniowy jest krzywą. Nie chcę krzywej, chciałbym linii prostej. Jak mogę skonfigurować wykres liniowy, aby nie krzywa? Dziękuję bardzo.

Answer 1

można użyć chart-options aby linię straight zamiast curved.

płótnie będzie wyglądać mniej więcej tak:

<canvas class="chart chart-line" chart-data="lineData" chart-labels="lineLabels" chart-series="lineSeries" chart-options="lineOptions" chart-click="onClick"></canvas> 

Dodaj lineOptions w kontrolerze tak:

$scope.lineOptions ={ elements : { line : { tension : 0 } } }; 
//define other variables required for `line` as per your requirement. 
//lineData , lineLabels , lineSeries, OnClick 

uczyni napięcie linii: 0. W ten sposób twoja linia stanie się prosta.

Jeśli nadal nie są w stanie dokonać prostej przy powyżej methd, można spróbować zainstalować najnowszy pakiet (beta) za pomocą polecenia poniżej:

bower install --save angular-chart.js#1.0.0 

Mam nadzieję, że to rozwiąże problem.

Answer 2

Spróbuj umieścić tę samą wartość dla każdego indeksu w zbiorze danych. To da ci poziomą linię prostą na wybranym punkcie wzdłuż osi Y.

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

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; 
    $scope.series = ['Series A', 'Series B']; 
    $scope.data = [ 
    [65, 65, 65, 65, 65, 65, 65], 
    [35, 35, 35, 35, 35, 35, 35] 
    ]; 
    $scope.onClick = function (points, evt) { 
    console.log(points, evt); 
    }; 
    $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' 
     } 
     ] 
    } 
    }; 
}); 

Oto markup

<canvas id="line" class="chart chart-line" chart-data="data" 
chart-labels="labels" chart-series="series" chart-options="options" 
chart-dataset-override="datasetOverride" chart-click="onClick" 
</canvas>