Question

我试图显示温度与时间的简单折线图。数据集的温度和时间间隔为十分钟。时间采用HH：mm格式。图形正确显示，但只显示左轴，右轴和第一个刻度时间值和网格线。

我的数据如下： 12:00 20.1 12:10 20.3 12:20 20.5 ... 13:20 21 13:30 21.4

我将左轴标记为12:00，然后使用网格线在12:10标记一个标签，然后在右轴上标记为13:30。

如果我遗漏了unitStepSize，我每分钟都会得到刻度线和网格线（拥挤）。所以很明显我错过了这个参数。

  var myChart = new Chart(ctx,
    {
      type: 'line',
      data: data,
      options :
      {
        responsive:false,
        maintainAspectRatio: false,
        scales:
        {
          xAxes: [
            {
              type: 'time',

              scaleLabel:
              {
                display: true,
                labelString: 'Time'
              },
              time:
              {
                unit: 'minute',
                unitStepSize: '10',
                format: "HH:mm",
                displayFormats:
                {
                  minute: 'HH:mm',
                  hour: 'HH:mm'
                }
              }
            }],
          yAxes: [
            {
              scaleLabel:
              {
                display: true,
                labelString: 'Temp'
              },
               ticks: {
                max: 25,
                min: 15,
                stepSize: 1
            }

            }]
        }
      }
    });

Answer 1

您目前面临的问题是因为您将unitStepSize值作为字符串传递。

它应该是数字，周围没有引号（''）。

＆＃13;

var ctx = document.querySelector('#canvas').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['12:00', '12:10', '12:20', '13:20', '13:30'],
        datasets: [{
            label: 'Temperatures',
            data: [20, 21, 22, 21, 23],
            backgroundColor: 'rgba(75,192,192, 0.4)',
            borderColor: '#4bc0c0',
            pointBackgroundColor: 'black',
            tension: 0,
            fill: false
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                scaleLabel: {
                    display: true,
                    labelString: 'Time'
                },
                time: {
                    unit: 'minute',
                    unitStepSize: 10,
                    format: "HH:mm",
                    displayFormats: {
                        minute: 'HH:mm',
                        hour: 'HH:mm'
                    }
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Temp'
                },
                ticks: {
                    max: 25,
                    min: 15,
                    stepSize: 1
                }
            }]
        }
    }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

＆＃13;

带有时间轴的图表仅显示第一个网格线和刻度标签（unitStepSize）

1 个答案: