如何增加 ng2-charts 中的折线图宽度?

How to increase line chart width in ng2-charts?

我正在尝试使用 "ng2-charts": "^2.3.0""chart.js": "^2.8.0" 渲染折线图。图表按预期显示,但唯一的问题是我无法使用 borderWidth 属性.

增加线宽

代码:

import { SingleDataSet, Label, Color } from "ng2-charts";
import { ChartType, ChartOptions } from "chart.js";

public barChartType1: ChartType = "line";


  public lineChartOptions: ChartOptions = {
    responsive: true,
    legend: { display: false },
    scales: {
      yAxes: [
       {
        display: false,
        ticks: {
          beginAtZero: false
        },
        scaleLabel: {
          display: true,
          labelString: '',
          fontSize: 20,
         }
       },
      ]
    
    },
    
    elements: {
      point:{
          radius: 0,
          borderWidth: 50
      }
    },
  };


  public lineChartColors: Color[] = [
    {
      borderColor: '#5081bd',
      backgroundColor: 'transparent',
    },
  ];

模板:

                        <canvas baseChart  height="30vh" width="80vw"
                            [colors]="lineChartColors" 
                            [datasets]="barChartDataSets1[customdata.index]"
                            [labels]="barChartLabels1[customdata.index]" 
                            [options]="lineChartOptions" 
                            [chartType]="barChartType1" 
                            (chartHover)="chartHovered($event)" 
                            (chartClick)="chartClicked($event)">
                        </canvas>

输入:

barChartDataSets1 [{"data":["2.00","2.00","2.00","2.00","2.00","2.00","2.00","2.00"]
barChartLabels1 [" "," "," ","ans1"," "," "," ","ans2"]

输出:

是否有任何解决方案,为什么更改 borderWidth 属性 不起作用?

这是因为您将选项放置在错误的命名空间中,而不是使用 options.elements.point 您需要将其放置在 options.elements.line:

elements: {
  point: {
    radius: 0,
  },
  line: {
    borderWidth: 8
  }
},