Question

我需要每2小时（0h，2h，4h ...）在x轴上显示标签。我想念什么？

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        //labels: ['0h', '2h', '4h', '6h', '8h', '10h', '12h', '14h', '16h', '18h', '20h', '22h', '0h'],
        datasets: [{
            label: 'AAA1111',
            //xAxisID: 'Hora',
            //yAxisID: 'Velocidade',
            data: [{
              t: new Date("2015-3-15 12:30"),
              y: 12
            },
            {
              t: new Date("2015-3-15 14:40"),
              y: 45
            },
            {
              t: new Date("2015-3-15 17:50"),
              y: 77
            }
            ],
            borderColor: 'rgba(255, 0, 0, 1)',
            borderWidth: 4,
            fill: false,
            lineTension: 0,
            lineJoint: "round",
            spanGaps: true
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'linear',
                time: {
                    unit: 'hour',
                    //stepSize: 24??
                },
                ticks: {
                    source: 'data'
                }
            }]
        }
    }
});
</script>

图表绘制时间x速度。

Answer 1

两个小的更改将达到预期的结果：

将stepSize: 2设置为“每2小时（0h，2h，4h ...）在X轴上显示标签”
将ticks: { source: 'data' }删除为that：

根据数据（包括来自数据{t | x | y}对象的标签）生成刻度线”

这是一个基于已发布代码的有效示例：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    //labels: ['0h', '2h', '4h', '6h', '8h', '10h', '12h', '14h', '16h', '18h', '20h', '22h', '0h'],
    datasets: [{
      label: 'AAA1111',
      //xAxisID: 'Hora',
      //yAxisID: 'Velocidade',
      data: [{
          t: new Date("2015-3-15 12:30"),
          y: 12
        },
        {
          t: new Date("2015-3-15 14:40"),
          y: 45
        },
        {
          t: new Date("2015-3-15 17:50"),
          y: 77
        }
      ],
      borderColor: 'rgba(255, 0, 0, 1)',
      borderWidth: 4,
      fill: false,
      lineTension: 0,
      lineJoint: "round",
      spanGaps: true
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        distribution: 'linear',
        time: {
          unit: 'hour',
          stepSize: 2
        }
      }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

如何在时间笛卡尔Chartjs中配置线性标签？

1 个答案: