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

Posted 2023-03-16

【中文标题】如何增加 ng2-charts 中的折线图宽度？

【英文标题】：How to increase line chart width in ng2-charts?

【发布时间】：2022-01-20 07:32:19

【问题描述】：

我正在尝试使用"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   
                            [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 属性不起作用？

【参考方案1】：

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

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