Question

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

正如您在上面的链接中所看到的，折线图是曲线。我不想要曲线，我喜欢直线。如何配置折线图使其不弯曲。非常感谢你。

Answer 1

您可以使用chart-options来设置行straight而不是curved。

你的画布看起来像这样：

<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

我希望这能解决你的问题。

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

这是标记

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

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

2 个答案: