ng2-charts折线图线条粗细调整无效，求解决方法

嘿，我来帮你搞定这个线条粗细的问题！ng2-charts其实是基于Chart.js封装的，所以调整线条样式得跟着Chart.js的规则来，你之前踩的坑大概率是属性放错位置或者用了非标准属性~

正确的配置方式 #

折线图的线条粗细是针对每个数据集设置的，你需要把borderWidth放在datasets数组里的单个数据集对象中，而不是全局配置里。另外lineThickness并不是Chart.js的标准属性，所以肯定不会生效啦。

给你一个完整的示例代码参考：

组件TS代码

import { Component } from '@angular/core';
import { ChartConfiguration, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  standalone: true,
  imports: [BaseChartDirective],
})
export class LineChartComponent {
  // 图表数据配置
  public lineChartData: ChartConfiguration['data'] = {
    labels: ['一月', '二月', '三月', '四月', '五月'],
    datasets: [
      {
        data: [65, 59, 80, 81, 56],
        label: '销售数据A',
        borderColor: '#2196F3',
        // 这里设置线条粗细，数值越小线条越细，比如1就是很细的线条
        borderWidth: 1,
        fill: false, // 不填充区域
      },
      {
        data: [28, 48, 40, 19, 86],
        label: '销售数据B',
        borderColor: '#4CAF50',
        borderWidth: 0.8, // 更细的效果
        fill: false,
      },
    ],
  };

  // 图表全局配置
  public lineChartOptions: ChartConfiguration['options'] = {
    responsive: true,
    maintainAspectRatio: false,
  };

  public lineChartType: ChartType = 'line';
}

组件HTML模板

<div style="height: 300px;">
  <canvas baseChart
          [data]="lineChartData"
          [options]="lineChartOptions"
          [type]="lineChartType">
  </canvas>
</div>

全局统一设置所有折线粗细 #

如果你想让所有折线都用同一个粗细，不用逐个数据集设置，可以在全局options里配置elements.line：

public lineChartOptions: ChartConfiguration['options'] = {
  responsive: true,
  elements: {
    line: {
      borderWidth: 1 // 全局统一设置所有折线的粗细
    }
  }
};

这样每个数据集如果没单独指定borderWidth，就会自动使用这个全局值。

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