为什么Chart.js中的刻度不工作,但一切都是正确的?

bpsygsoo  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(157)
var xValues = timeArray;

new Chart("myChart", 
{
  type: "line",
  data: 
  {
    labels: xValues,
    datasets: [{
      label: "Size",
      data: sizeArray,
      borderColor: "green",
      fill: false
    }]
  },
  options: 
  {
    legend: {display: false},
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
            display: true,
            labelString: document.getElementById("label_text").innerHTML
        },
        ticks: {
            min: 0,
            max: 30,
            stepSize: 1
          }
    }],
     yAxes: [{
        display: true,
        scaleLabel: {
           display: true,
           labelString: "Size (no. of elements)"
       }
    }]
  }
  }
});

The data is properly plotted on the x axes但是我想要的是我的x轴是线性缩放的。我已经尝试了很多方法,但是它仍然不起作用。我不能找到我错过了什么?
请帮帮忙
生成的图表的图像:

ccgok5k5

ccgok5k51#

一个快速的解决方案是将图表类型更改为散点图,并将showLine设置为True。散点图将自动对x轴和y轴使用线性轴。

new Chart("myChart", 
{
  type: "scatter",
  data: 
  {
    labels: xValues,
    datasets: [{
      label: "Size",
      data: sizeArray,
      borderColor: "green",
      fill: false,
      showLine: true,
      tension: 0.15
    }]
  },...

这是一个DEMO

相关问题