如何将Angular 8中ng2-charts折线图的曲线改为直线？

嗨，这个问题其实很好解决！ng2-charts是基于Chart.js封装的，默认情况下折线会带有曲线弧度，只要调整lineTension参数就能把曲线改成笔直的线条啦。

你可以通过两种方式来设置：

1. 针对单个数据集设置 #

直接在你的折线图数据集中添加lineTension: 0属性，这样只会修改当前数据集的线条样式：

public lineChartData: ChartDataSets[] = [
  { 
    data: [65, 59, 80, 81, 56, 55, 40], 
    label: 'Series A', 
    lineTension: 0 // 这里设置为0，线条就变直了
  },
  { 
    data: [28, 48, 40, 19, 86, 27, 90], 
    label: 'Series B', 
    lineTension: 0 
  }
];

2. 全局设置所有线条 #

如果你希望图表中所有折线都变成直线，可以在图表配置的elements.line里统一设置lineTension: 0：

public lineChartOptions: ChartOptions = {
  responsive: true,
  elements: {
    line: {
      lineTension: 0 // 全局设置所有折线为直线
    }
  }
};

补充说明：lineTension的取值范围是0到1，0代表完全笔直，数值越大线条弯曲程度越高。设置为0后，你的折线图就会显示成笔直的线条啦。

内容的提问来源于stack exchange，提问作者Abhishek Satyavolu