Chart.js 缩放 x 值答案

【问题标题】：Chart.js scale x valuesChart.js 缩放 x 值
【发布时间】：2020-11-21 02:10:54
【问题描述】：

我会缩放图表的 x 轴（使用 chartjs 2.9 显示）。

以下是图表的脚本：

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: xvalues,
    datasets: [{
      label: 'Absorbance',
      backgroundColor: '#708090',
      borderColor: 'black',
      data: [],
      lineTension: 0,   
      fill: false,
    }]
  },
  options: {
        scales: {
         xAxes: [{
            ticks: {
               userCallback: function(item, index) {
                  if (!(index % 9)) return item;
               },
               autoSkip: false
            }
         }],         
         yAxes: [{
                    display: true,
                    scaleLabel: {
                    display: true,
                    labelString: 'Absorbance'
                        }
                    }]       
         },
        animation: {
            duration: 0 
        },
        hover: {
            animationDuration: 0 
        },
        legend: {
            display: false
        },
        responsiveAnimationDuration: 0 
    }
});

每隔 xx 秒，我会像这样更新图表（arrR 是一个包含所有 y 值的数组）。 x 值没有给出，因此代表迭代次数。

 chart.data.datasets[0].data.push(arrR[iteration]); 
    chart.update();

我想像这样更改缩放比例（参见图片，缩放因子为 10）：

非常感谢

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

您可以如下定义xAxes.ticks.stepSize: 10：

options: {
  scales: {
    xAxes: [{
      ticks: {
        min: 1,
        max: 45,
        stepSize: 10
      }
    }]
  }    
}

请参阅 Chart.js 文档中的 Tick Options 章节。

【讨论】：

谢谢，但这不是我想要的。我希望 1 变成 10，10 变成 100。所以将迭代次数乘以 10。

【解决方案2】：

找到答案了。

你可以的

const xvalues0 = Array.from({length: n}, (_, index) => index + 1);
const xvalues = xvalues0.map(x => x * (timeinterval/(1000*60)));

【讨论】：