Angular-chart.js - 使折线图不弯曲

Question

我正在使用 Angular-Chart.js（位于 https://jtblin.github.io/angular-chart.js/#line-chart）的折线图指令。

如上图link所示，折线图就是曲线。我不要曲线，我想要直线。如何配置折线图使其不弯曲。非常感谢。

Answer 1

尝试为数据集中的每个索引设置相同的值。这将为您提供一条沿 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'
        }
      ]
    }
  };
});

这是标记

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

Answer 2

您可以使用 chart-options 使您的行 straight 而不是 curved。

您的 canvas 看起来像这样：

<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。这样，你的线就会变直。

如果您仍然无法使用上述方法使您的线路变直，您可以尝试通过以下命令安装最新的软件包（测试版）：

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

希望这能解决您的问题。

Angular-chart.js - 使折线图不弯曲

Angular-chart.js - Make line chart does not curve

angularjs

chart.js

angular-chart