Angular-chart.js - Machen Sie Liniendiagramm nicht Kurve

Question

Ich verwende Liniendiagramm-Direktive von Angular-Chart.js (um https://jtblin.github.io/angular-chart.js/#line-chart).

Wie Sie oben genannten Link sehen können, ist ein Liniendiagramm Kurve. Ich möchte keine Kurve, ich möchte gerade Linie. Wie kann ich Liniendiagramm konfigurieren, damit es nicht kurvt. Vielen Dank.

Answer 1

Sie chart-options verwenden können Sie Ihre Linie straight statt curved zu machen.

Ihre Leinwand würde wie folgt aussehen:

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

hinzufügen lineOptions in Ihrem Controller wie folgt aus:

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

Dadurch wird die Spannung Ihrer Linie: 0. So wird Ihre Linie gerade.

Wenn Sie noch nicht in der Lage sind Ihre Linie gerade zu machen über methd verwenden, können Sie versuchen, das neueste Paket (Beta) von dem unter Befehl installieren:

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

Ich hoffe, dass dies Ihr Problem lösen wird.

Answer 2

Versuchen Sie, für jeden Index im Dataset denselben Wert einzugeben. Dadurch erhalten Sie eine gerade Linie horizontal an einem ausgewählten Punkt entlang der y-Achse.

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' 
     } 
     ] 
    } 
    }; 
}); 

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