ChartJS autoskip:False 无法处理折线图

Question

我有一个使用 ChartJs 创建的折线图。我在 javascript 的刻度下的 Y 轴中添加了一个 AutoSkip: false 因为我想显示 Y 轴上标签中的每个日期，但我的一些正在跳过日期。

日期从 2022-02-25 开始，到 2022-05-06 结束。但是 Y 轴跳过了一些日期。我不要那个。我希望显示每个日期。谁能告诉我我的代码有什么问题吗？

下面是我的代码示例：

// setup 
    const data = {
      datasets: [
{label: 'PZ-1',data:[{y:'2022-02-25', x:40.551},{y:'2022-03-01', x:35.889},{y:'2022-03-02', x:34.68},{y:'2022-03-03', x:33.182},{y:'2022-03-04', x:30.82},{y:'2022-03-05', x:29.864},{y:'2022-03-08', x:28.413},{y:'2022-03-10', x:28.413},{y:'2022-03-12', x:28.424},{y:'2022-03-15', x:25.578},{y:'2022-03-17', x:27.07},{y:'2022-03-19', x:27.42},{y:'2022-03-22', x:27.478},{y:'2022-03-24', x:22.817},{y:'2022-03-26', x:22.576},{y:'2022-03-29', x:22.326},{y:'2022-03-31', x:22.011},{y:'2022-04-02', x:21.672},{y:'2022-04-05', x:21.561},{y:'2022-04-07', x:21.307},{y:'2022-04-09', x:34.988},{y:'2022-04-12', x:28.89},{y:'2022-04-14', x:28.618},{y:'2022-04-17', x:28.862},{y:'2022-04-19', x:27.727},{y:'2022-04-21', x:27.493},{y:'2022-04-23', x:27.149},{y:'2022-04-26', x:25.862},{y:'2022-04-28', x:25.59},{y:'2022-04-30', x:25.37},{y:'2022-05-04', x:24.79},{y:'2022-05-06', x:24.927}],backgroundColor: '#FFD700',borderColor: '#FFD700',borderWidth: 1}
    ]
    };
    // config 
    const config = {
      type: 'line',
      data,
      options: {
        indexAxis: 'y',
        scales: {
          x: {
            beginAtZero: true
          },
          y:{
            reverse: true,
            type: 'time',
            ticks: {
              autoSkip: false
            }
          }
        }
      }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );

      * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartCard {
        width: 100vw;
        height: 100vh;
        background: rgba(255, 26, 104, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 1200px;
        padding: 50px;
        border-radius: 20px;
        border: solid 3px rgba(255, 26, 104, 1);
        background: white;
      }
      @media only screen and (min-width: 1600px) {.chartBox {width: 1600px; }}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Line Chart</title>
  </head>
  <body>
    <div class="chartCard">
      <div class="chartBox">
        <canvas id="myChart" style="position: relative;"></canvas>
      </div>
    </div>
    <script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

Answer 1

默认情况下，时间刻度生成 nice 个滴答声，因为时间可能相差很远。如果您想显示所有报价，您需要将报价中的 source 设置为 'data'。之后自动跳过属性将起作用。

scales: {
  y: {
    type: 'time',
    ticks: {
      source: 'data',
      autoSkip: false
    }
  }
}

实例：

// setup 
const data = {
  datasets: [{
    label: 'PZ-1',
    data: [{
      y: '2022-02-25',
      x: 40.551
    }, {
      y: '2022-03-01',
      x: 35.889
    }, {
      y: '2022-03-02',
      x: 34.68
    }, {
      y: '2022-03-03',
      x: 33.182
    }, {
      y: '2022-03-04',
      x: 30.82
    }, {
      y: '2022-03-05',
      x: 29.864
    }, {
      y: '2022-03-08',
      x: 28.413
    }, {
      y: '2022-03-10',
      x: 28.413
    }, {
      y: '2022-03-12',
      x: 28.424
    }, {
      y: '2022-03-15',
      x: 25.578
    }, {
      y: '2022-03-17',
      x: 27.07
    }, {
      y: '2022-03-19',
      x: 27.42
    }, {
      y: '2022-03-22',
      x: 27.478
    }, {
      y: '2022-03-24',
      x: 22.817
    }, {
      y: '2022-03-26',
      x: 22.576
    }, {
      y: '2022-03-29',
      x: 22.326
    }, {
      y: '2022-03-31',
      x: 22.011
    }, {
      y: '2022-04-02',
      x: 21.672
    }, {
      y: '2022-04-05',
      x: 21.561
    }, {
      y: '2022-04-07',
      x: 21.307
    }, {
      y: '2022-04-09',
      x: 34.988
    }, {
      y: '2022-04-12',
      x: 28.89
    }, {
      y: '2022-04-14',
      x: 28.618
    }, {
      y: '2022-04-17',
      x: 28.862
    }, {
      y: '2022-04-19',
      x: 27.727
    }, {
      y: '2022-04-21',
      x: 27.493
    }, {
      y: '2022-04-23',
      x: 27.149
    }, {
      y: '2022-04-26',
      x: 25.862
    }, {
      y: '2022-04-28',
      x: 25.59
    }, {
      y: '2022-04-30',
      x: 25.37
    }, {
      y: '2022-05-04',
      x: 24.79
    }, {
      y: '2022-05-06',
      x: 24.927
    }],
    backgroundColor: '#FFD700',
    borderColor: '#FFD700',
    borderWidth: 1
  }]
};
// config 
const config = {
  type: 'line',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        beginAtZero: true
      },
      y: {
        reverse: true,
        type: 'time',
        ticks: {
          autoSkip: false,
          source: 'data'
        }
      }
    }
  }
};

// render init block
const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.chartCard {
  width: 100vw;
  height: 100vh;
  background: rgba(255, 26, 104, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chartBox {
  width: 1200px;
  padding: 50px;
  border-radius: 20px;
  border: solid 3px rgba(255, 26, 104, 1);
  background: white;
}

@media only screen and (min-width: 1600px) {
  .chartBox {
    width: 1600px;
  }
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Line Chart</title>
</head>

<body>
  <div class="chartCard">
    <div class="chartBox">
      <canvas id="myChart" style="position: relative;"></canvas>
    </div>
  </div>
  <script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

Answer 2

您必须设置一个高度，否则它会调整到可用的高度并且只显示一些Y-data。

// setup 
    const data = {
      datasets: [
{label: 'PZ-1',data:[{y:'2022-02-25', x:40.551},{y:'2022-03-01', x:35.889},{y:'2022-03-02', x:34.68},{y:'2022-03-03', x:33.182},{y:'2022-03-04', x:30.82},{y:'2022-03-05', x:29.864},{y:'2022-03-08', x:28.413},{y:'2022-03-10', x:28.413},{y:'2022-03-12', x:28.424},{y:'2022-03-15', x:25.578},{y:'2022-03-17', x:27.07},{y:'2022-03-19', x:27.42},{y:'2022-03-22', x:27.478},{y:'2022-03-24', x:22.817},{y:'2022-03-26', x:22.576},{y:'2022-03-29', x:22.326},{y:'2022-03-31', x:22.011},{y:'2022-04-02', x:21.672},{y:'2022-04-05', x:21.561},{y:'2022-04-07', x:21.307},{y:'2022-04-09', x:34.988},{y:'2022-04-12', x:28.89},{y:'2022-04-14', x:28.618},{y:'2022-04-17', x:28.862},{y:'2022-04-19', x:27.727},{y:'2022-04-21', x:27.493},{y:'2022-04-23', x:27.149},{y:'2022-04-26', x:25.862},{y:'2022-04-28', x:25.59},{y:'2022-04-30', x:25.37},{y:'2022-05-04', x:24.79},{y:'2022-05-06', x:24.927}],backgroundColor: '#FFD700',borderColor: '#FFD700',borderWidth: 1}
    ]
    };
    // config 
    const config = {
      type: 'line',
      data,
      options: {
        indexAxis: 'y',
        maintainAspectRatio: false,
        responsive: true,
        scales: {
          x: {
            beginAtZero: true
          },
          y:{            
            reverse: true,
            type: 'time',
            ticks: {
              autoSkip: false
            }
          }
        }
      }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );

* {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartCard {
        overflow:auto;
        background: rgba(255, 26, 104, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        
        padding: 50px;        
        border-radius: 20px;
        border: solid 3px rgba(255, 26, 104, 1);
        background: white;
      }
      @media only screen and (min-width: 1600px) {.chartBox {width: 1600px; }}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>F3 Peizometer</title>
  </head>
  <body>
    <div class="chartCard">
      <div class="chartBox">
        <canvas id="myChart" style="position: relative;height:900px;width:400px"></canvas>
      </div>
    </div>
    <script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

ChartJS autoskip:False 无法处理折线图

ChartJS autoskip:False not working on line chart

javascript

html

chart.js