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

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

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

  • 谢谢-谢谢
stszievb

stszievb1#

bezierCurve: false传递到选项中,如下所示:

  1. <canvas baseChart width="400" height="400"
  2. [datasets]="lineChartData"
  3. [labels]="lineChartLabels"
  4. [options]="{bezierCurve: false}">
  5. </canvas>

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

  1. <canvas baseChart width="400" height="400"
  2. [datasets]="lineChartData"
  3. [labels]="lineChartLabels"
  4. [options]="{lineTension: 0}">
  5. </canvas>

或者,如果要影响某个数据集:

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

来自OP的不相关问题:

  • 我注意到,默认情况下,折线图下的区域有颜色,我尝试了background-color:'none';,但没有工作,它只是把一个灰色的颜色下。有没有办法没有任何颜色下的线?*
  1. <canvas baseChart width="400" height="400"
  2. [datasets]="{data: data, lineTension: 0, fill: false}"
  3. [labels]="lineChartLabels"
  4. [options]="lineChartOptions">
  5. </canvas>

[datasets]="{fill: false}"

展开查看全部
j0pj023g

j0pj023g2#

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

  1. public lineChartOptions: ChartConfiguration['options'] = {
  2. elements: {
  3. line: {
  4. tension: 0
  5. }
  6. }
  7. }

HTML代码:

  1. <canvas baseChart
  2. [data]="lineChartData"
  3. [options]="lineChartOptions">
  4. </canvas>

相关问题