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

【问题标题】：How to increase line chart width in ng2-charts?如何增加 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  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 属性不起作用？

【问题讨论】：

标签： javascript angular chart.js linechart ng2-charts

【解决方案1】：

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

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

【讨论】：