我正在使用ng 2-charts在我的Angular 8应用程序中制作折线图。但是,折线图显示为曲线而不是直线。我从下面的链接www.example.com中获取代码https://valor-software.com/ng2-charts/#/LineChart正如你所看到的,这些线不是直线。如何使它们成为直线?
stszievb1#
将bezierCurve: false传递到选项中,如下所示:
bezierCurve: false
<canvas baseChart width="400" height="400" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="{bezierCurve: false}"></canvas>
<canvas baseChart width="400" height="400"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="{bezierCurve: false}">
</canvas>
或者,如果您使用较新版本的lineTension: 0:
lineTension: 0
<canvas baseChart width="400" height="400" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="{lineTension: 0}"></canvas>
[options]="{lineTension: 0}">
或者,如果要影响某个数据集:
<canvas baseChart width="400" height="400" [datasets]="{data: data, lineTension: 0}" [labels]="lineChartLabels" [options]="lineChartOptions"></canvas>
[datasets]="{data: data, lineTension: 0}"
[options]="lineChartOptions">
来自OP的不相关问题:
background-color:'none';
<canvas baseChart width="400" height="400" [datasets]="{data: data, lineTension: 0, fill: false}" [labels]="lineChartLabels" [options]="lineChartOptions"></canvas>
[datasets]="{data: data, lineTension: 0, fill: false}"
[datasets]="{fill: false}"
j0pj023g2#
新版本的ng 2-chart是这样的:Javascript程式码:
public lineChartOptions: ChartConfiguration['options'] = { elements: { line: { tension: 0 } }}
public lineChartOptions: ChartConfiguration['options'] = {
elements: {
line: {
tension: 0
}
HTML代码:
<canvas baseChart [data]="lineChartData" [options]="lineChartOptions"> </canvas>
<canvas baseChart
[data]="lineChartData"
2条答案
按热度按时间stszievb1#
将
bezierCurve: false
传递到选项中,如下所示:或者,如果您使用较新版本的
lineTension: 0
:或者,如果要影响某个数据集:
来自OP的不相关问题:
background-color:'none';
,但没有工作,它只是把一个灰色的颜色下。有没有办法没有任何颜色下的线?*[datasets]="{fill: false}"
j0pj023g2#
新版本的ng 2-chart是这样的:
Javascript程式码:
HTML代码: