我在x轴上有10个点，范围为[-25，-20 ,,-15，-10,0,10,20,30,40,50]。但我希望折线图从x轴的-15开始。我们如何实现？

Question

我在x轴上有10个点，范围为[-25，-20，-10,0,10,20,30,40,50]。但我希望折线图从x轴的-15开始。我们如何实现？下面是我尝试使用suggestedmin和suggestedmax代码，但没有成功。请提出实现此目标的方法]

export class CgChartComponent {
  lineChartData: ChartDataSets[] = [
    { data: [3145000, 3430001, 1499998, 1700000, 3515340, 2480011], label: 'ABC', lineTension: 0, },
  ];
 
  lineChartLabels: Label[] = ['-25','-20','-15', '-10', '0', '10', '20', '30','40','50' ];
  lineChartOptions = {
    responsive: true,
    responsiveAnimationDuration: 30,
    legend: {
      position: 'bottom'
  },
  scales: {
    xAxes: [{
        ticks: {
          suggestedMin:  -15,
          suggestedMax:  40
        }
    }]
}
  };

  lineChartColors: Color[] = [
    {
      borderColor: 'black',
     
    },
  ];

  lineChartLegend = true;
  lineChartPlugins = [];
  lineChartType = 'line';
}

Answer 1

尝试如下使用min和max代替suggestedMin和suggestedMax：

xAxes: [{
  ticks: {
    min:  -15,
    max:  40
  }
}]

来自Chart.js文档

Axis Range Settings

suggestedMax和suggestedMin设置仅更改用于缩放轴的数据值。这些对于扩展轴的范围同时保持自动装配行为很有用。

Tick Configuration

min：用户定义的刻度最小值，将覆盖数据中的最小值。

[max：用户定义的刻度最大值，将覆盖数据中的最大值。

UPDATE

问题可能是标签是字符串，但是min和max被定义为数字。这可以通过两种不同的方式解决。

要么将标签转换为数字，要么如下定义min和max：

xAxes: [{
  ticks: {
    min: '-15',
    max: '40'
  }
}]