Angular-chart.js - 선 차트가 곡선으로 나타나지 않음

Question

Angular-Chart.js의 회선 차트 지시문 (https://jtblin.github.io/angular-chart.js/#line-chart)을 사용하고 있습니다.

위의 링크에서 알 수 있듯이 선 그래프는 곡선입니다. 나는 커브 싶지 않아, 직선 싶습니다. 그래프를 구부러 지도록 구성하려면 어떻게해야합니까? 대단히 감사합니다.

Answer 1

입니다.

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

이 같은 컨트롤러에 lineOptions 추가 : 이것은 당신의 라인의 장력을 만들 것입니다

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

:

캔버스는 다음과 같이 보일 것이다 0. 따라서 라인이 직선이됩니다. 당신은 여전히 ​​똑바로 methd 이상 사용하여 라인을 만들 수없는 경우

, 당신은 아래의 명령으로 최신 패키지 (베타)를 설치 시도 할 수 있습니다 :

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

나는이 문제를 해결할 수 있기를 바랍니다.

Answer 2

데이터 세트의 각 색인에 동일한 값을 넣으십시오. 그러면 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' 
     } 
     ] 
    } 
    }; 
}); 

당신이 당신의 라인 straight 대신 curved를 만들기 위해 chart-options를 사용할 수있는 마크 업

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