如何从 ng2-charts 直线制作折线图中的线条？

Question

我正在使用 ng2-charts 在我的 Angular 8 应用程序中制作折线图。但是，折线图显示为曲线而不是直线。我从下面的 link https://valor-software.com/ng2-charts/#/LineChart 中获取代码，如您所见，线条不是直的。如何使它们成为直线？

谢谢。

Answer 1

将bezierCurve: false传入选项如下：

<canvas baseChart width="400" height="400"
            [datasets]="lineChartData"
            [labels]="lineChartLabels"
            [options]="{bezierCurve: false}">
</canvas>

或者如果您使用较新的版本 lineTension: 0:

<canvas baseChart width="400" height="400"
            [datasets]="lineChartData"
            [labels]="lineChartLabels"
            [options]="{lineTension: 0}">
</canvas>

或者如果你想影响某个数据集：

<canvas baseChart width="400" height="400"
            [datasets]="{data: data, lineTension: 0}"
            [labels]="lineChartLabels"
            [options]="lineChartOptions">
</canvas>

来自 OP 的无关问题：

我注意到默认情况下折线图下方的区域有颜色，我试过 background-color:'none'; 但那没有用，它只是在它下面放了一个灰色。 有什么办法可以让线下没有任何颜色吗？

<canvas baseChart width="400" height="400"
            [datasets]="{data: data, lineTension: 0, fill: false}"
            [labels]="lineChartLabels"
            [options]="lineChartOptions">
</canvas>

[datasets]="{fill: false}"

如何从 ng2-charts 直线制作折线图中的线条？

How to make lines in line charts from ng2-charts straight lines?

html

typescript

chart.js

ng2-charts

angular