ng2-charts - 如何标记 y 轴？答案

【问题标题】：ng2-charts - How to label y axis?ng2-charts - 如何标记 y 轴？
【发布时间】：2021-05-12 00:21:40
【问题描述】：

无法弄清楚如何使用 ng2-charts 标记 y 轴。文档似乎只有关于标记 x 轴的信息，并且直接使用 chart.js 方法不会产生任何结果。

表单组件.ts:

  public barChartOptions = {
    scaleShowVerticalLines: false,
    maintainAspectRatio: false,

    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'Frequency Rate'
      }}]
    //responsive: true
  };

HTML：

<script src="node_modules/chart.js/src/chart.js"></script>

<!--<button mat-button mat-raised-button color="primary" (click)="populate_data()">Update</button>-->

<div>
  <canvas baseChart class="chart" height ='450'

        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType">

      </canvas>
    </div>

【问题讨论】：

您能否添加一张图片，显示您希望它的外观以及一些可使用的示例数据？

标签： angular ng2-charts

【解决方案1】：

ng2-charts 是原始 chart.js 库的包装 angular 库。

chart.js 中的文档更详细：https://www.chartjs.org/docs/latest/charts/bar.html

如何使用 ng2-charts 标记 y 轴

在 chart.js 中，y 轴的刻度是根据您推送到 ChartDataSets[] 的数据自动确定的

例如最大 y 轴值为 99

public barChartData: ChartDataSets[] = [
    { data: [5, 1, 99], label: 'Series A' },
    { data: [6, 10, 45], label: 'Series B' }
];

要控制 y 轴刻度的外观，请参阅以下文档： https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

因此，如果您希望将刻度的 stepSize 控制为增量 2，您可以执行以下操作：

yAxes: [{
   ticks: {
      stepSize: 2,
      beginAtZero: true
   }
}]

如果您想将最大 y 轴刻度标签设置为始终为 100，您将像这样定义您的选项：

yAxes: [{
   ticks: {
      max: 100
   }
}]

标记你的 y 轴：

public barChartOptions: ChartOptions = { // import { ChartOptions } from 'chart.js'; 
   ...
   responsive: true,
   maintainAspectRatio: false,
   ...
   scales: { //you're missing this
      yAxes: [{
         scaleLabel: {
            display: true,
            labelString: 'Frequency Rate'
         }
      }]
   }//END scales
};

【讨论】：

对不起大家，我想我不清楚我在说什么。例如：chartjs.org/samples/latest/legend/positioning.html 如果您查看这些图表，“值”一词出现在 y 轴旁边，“月份”出现在 x 轴下方。这就是我所追求的。
啊，现在更有意义了。我已经编辑了我的答案。您缺少 scales: {} 属性。查看chartjs.org/docs/latest/axes/labelling.html 以获取其他属性以编辑您的标签
我已将 ChartOptions 类型添加到您的 barChartOptions。它将帮助您在编译之前检查您的属性对象是否正确。如果您使用的是 Visual Studio Code，您也可以按 ctrl + 空格来获得建议。
啊！美丽:) 非常感谢。显然我应该关注 Canvas.js 文档而不是 ng2-Charts！
如果一个人想要根据条件获得动态标签，那么语法是什么。 scaleLabel: { display: true, labelString: title // 根据条件 }

【解决方案2】：

这应该会有所帮助，不要忘记为每个设置“display:true”。它对我有用

ChartOptions: any = {
 responsive: true,
 scales: {
  yAxes: [
   {
    display: true,
    scaleLabel: {
     display: true,
     labelString: "Number of Reads",
    },
   },
  ],
  xAxes: [
   {
    scaleLabel: {
     display: true,
     labelString: "Date",
    },
   },
  ],
 },
};

【讨论】：