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

Question

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

Answer 1

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

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

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

How to increase line chart width in ng2-charts?

javascript

linechart

chart.js

ng2-charts

angular