javascript - Chart.js 简单折线图

Question

我对简单的 Chart.js Angular 图有疑问

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>

注意:页面中有一个引导容器，因此网格系统没问题

typescript

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 或更高版本，您可以通过修改选项对象中的 scales 属性来自定义图表:

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

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