Chart.js简单折线图

Question

我在角上使用简单的chart.js图有问题

HTML：

<div class="row">
  <div class="col-12"><strong>Výškový profil</strong></div>
  <div class="col-12">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [chartType]="'line'"
            [colors]="lineChartColors"
            [legend]="false"
    ></canvas>
  </div>
</div>

注意：页面中有一个引导容器，因此网格系统很好

打字稿

public barChartOptions:any = {
    chartType: 'line',
    legend: false,
    responsive: true,
};
public barChartLabels:string[];

public barChartData:any[] = [{data:[10,200,30,40]}];

public lineChartColors:Array<any> = [
    {
        backgroundColor: '#23CE6B',
        borderColor: '#23CE6B'
    }
];

问题是，如果我可以进行此采样（数据只是虚拟的，它们将从API加载），我将得到此结果

那不是我所期望的。

4分中只有2分（从10分到200分）。 如何修改它以显示整个数据图？

再加上一个问题，我可以在Y轴上贴上标签吗？ （在数字的左侧）

Answer 1

如果您使用的是ChartJS 2.0或更高版本，则可以通过修改options对象中的scales属性来自定义图形：

options = {
    scales: {
    yAxes: [{
        scaleLabel: {
        display: true,
        labelString: 'Your Y axis label'
      }
    }]
  }
}

根据您的版本，您可能需要设置以下选项： bezierCurve: false或tension: 0我感觉到您的点正在绘制中，但是您的曲线太圆且充满了您无法分辨的背景颜色。