ChartJS 显示时间数据的差距

Question

我有这个图：

这是在 ChartJS 中构建的，但是，在下午 1 点到 5 点 30 分之间，没有数据。

我想让图表做的是显示没有数据，而不是连接两个点。

这能做到吗？从理论上讲，我每 5 秒有一个新值，但这可能会减少，所以我想我需要能够设置间隙的容差以加入与显示的间隙？

图表选项如下所示：

        myChart = new Chart(ctx, 
        {
            type: 'line',
            data: 
            {
                labels: timestamp,
                datasets: 
                [{data: speed,backgroundColor: ['rgba(0, 9, 132, 0.2)'],borderColor: ['rgba(0, 0, 192, 1)'],borderWidth: 1},
                {data: target,borderColor: "rgba(255,0,0,1)",backgroundColor: "rgba(255,0,0,0)",borderWidth: 1,tooltips: {enabled: false}}]
            },
            options: 
            {
                scales: {yAxes: [{ticks: {beginAtZero:true, min: 0, max: 300}}], xAxes: [{type: 'time',}]},
                elements: 
                {point:{radius: 0,hitRadius: 5,hoverRadius: 5},
                line:{tension: 0}},
                legend: {display: false},
                pan: {enabled: true,mode: 'xy',rangeMin: {x: null,y: null},rangeMax: {x: null,y: null}},
                zoom: {enabled: true,drag: true,mode: 'xy',rangeMin: {x: null,y: null},rangeMax: {x: null,y: null}},

            }
        });

提前致谢

Answer 1

使用spanGaps您可以控制没有或空数据的点之间折线图的行为：

var timestamp = [],
  speed = [10, 100, 20, 30, 40, null, null, null, 100, 40, 60],
  target = [20, 30, 40, 10, null, null, null, null, 200, 60, 90];
for (var k = 10; k--; k > 0) {
  timestamp.push(new Date().getTime() - 60 * 60 * 1000 * k);
}
var ctx = document.getElementById('chart').getContext("2d");
var data = {
  labels: timestamp,
  datasets: [{
      data: speed,
      backgroundColor: ['rgba(0, 9, 132, 0.2)'],
      borderColor: ['rgba(0, 0, 192, 1)'],
      borderWidth: 1,
      spanGaps: false,
    },
    {
      data: target,
      borderColor: "rgba(255,0,0,1)",
      backgroundColor: "rgba(255,0,0,0)",
      borderWidth: 1,
      spanGaps: false,
      tooltips: {
        enabled: false
      }
    }
  ]
};
var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        min: 0,
        max: 300
      }
    }],
    xAxes: [{
      type: 'time',
    }]
  },
  elements: {
    point: {
      radius: 0,
      hitRadius: 5,
      hoverRadius: 5
    },
    line: {
      tension: 0
    }
  },
  legend: {
    display: false
  },
  pan: {
    enabled: true,
    mode: 'xy',
    rangeMin: {
      x: null,
      y: null
    },
    rangeMax: {
      x: null,
      y: null
    }
  },
  zoom: {
    enabled: true,
    drag: true,
    mode: 'xy',
    rangeMin: {
      x: null,
      y: null
    },
    rangeMax: {
      x: null,
      y: null
    }
  },

};

var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>

作为替代方案，您可以修改数据数组并替换null为zero：

var timestamp = [],
    speed = [10, 100, 20, 30, 40, null, null, null, 100, 40, 60],
    target = [20, 30, 40, 10, null, null, null, null, 200, 60, 90];
for (var k = 10; k--; k>0) {
	timestamp.push(new Date().getTime()-60*60*1000*k);
}

function nullToZero(array) {
  return array.map(function(v) { 
    if (v==null) return 0; else return v;
  });
}

var ctx = document.getElementById('chart').getContext("2d");
var data = {
  labels: timestamp,
  datasets: [{
      data: nullToZero(speed),
      backgroundColor: ['rgba(0, 9, 132, 0.2)'],
      borderColor: ['rgba(0, 0, 192, 1)'],
      borderWidth: 1,
    },
    {
      data: nullToZero(target),
      borderColor: "rgba(255,0,0,1)",
      backgroundColor: "rgba(255,0,0,0)",
      borderWidth: 1,
      tooltips: {
        enabled: false
      }
    }
  ]
};
var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        min: 0,
        max: 300
      }
    }],
    xAxes: [{
      type: 'time',
    }]
  },
  elements: {
    point: {
      radius: 0,
      hitRadius: 5,
      hoverRadius: 5
    },
    line: {
      tension: 0
    }
  },
  legend: {
    display: false
  },
  pan: {
    enabled: true,
    mode: 'xy',
    rangeMin: {
      x: null,
      y: null
    },
    rangeMax: {
      x: null,
      y: null
    }
  },
  zoom: {
    enabled: true,
    drag: true,
    mode: 'xy',
    rangeMin: {
      x: null,
      y: null
    },
    rangeMax: {
      x: null,
      y: null
    }
  },

};

var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>