ChartJS 如何从ng 2-charts直线中生成折线图中的线条?

ivqmmu1c  于 2022-11-07  发布在  Chart.js
关注(0)|答案(2)|浏览(163)

我正在使用ng 2-charts在我的Angular 8应用程序中制作折线图。但是,折线图显示为曲线而不是直线。我从下面的链接www.example.com中获取代码https://valor-software.com/ng2-charts/#/LineChart正如你所看到的,这些线不是直线。如何使它们成为直线?

  • 谢谢-谢谢
stszievb

stszievb1#

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

j0pj023g

j0pj023g2#

新版本的ng 2-chart是这样的:
Javascript程式码:

public lineChartOptions: ChartConfiguration['options'] = {
    elements: {
      line: {
        tension: 0
      }
    }
}

HTML代码:

<canvas baseChart 
                  [data]="lineChartData"
                  [options]="lineChartOptions">
 </canvas>

相关问题