Angular Chart.js 条形图

Question

我在 angular 7.This 图表中使用 chart.js 的条形图来显示保单与其销售数量之间的关系。如果最大销售数量为 2 或 1 或一个小数字，则图表以点为单位显示沿 y 轴的值，从 1 开始到最大值结束 value.Right 现在我最多有 6 个保单，因此values中没有点数，但是当最大策略数减少到2时，values为1.0, 1.1, 1.2, 1.3....2.0。我希望值在 y 轴上是非十进制的，而且它们应该从零开始到最大数 0,1,2,3...,。可能吗？

//组件

   chartData1 = [
      {
        label: 'Policies',
        data: this.policies 
      },

    ];

chartOptions = {
  responsive: true    // THIS WILL MAKE THE CHART RESPONSIVE (VISIBLE IN ANY DEVICE).
}

//模板

<canvas
        baseChart
        [chartType]="'bar'"
        [datasets]="chartData"
        [labels]="labels"
        [options]="chartOptions"
        [legend]="true"
        height="80"
        width="100"
        [colors]="colors"
        (chartClick)="onChartClick($event)">
    </canvas>

Answer 1

在您的组件中，尝试按如下方式定义 chartOptions：

chartOptions = {
  responsive: true,
  scales: {
     yAxes: [{
        ticks: {
            beginAtZero: true,
            stepSize: 1
        }
    }]
  }
}

Angular Chart.js 条形图

Angular Chart.js Bar Chart

chart.js

angular7