Блог

Мне нужен небольшой совет.

У меня есть следующая диаграмма:

Я хотел бы начать ось графика в 00:00 и закончить в 23.59, но мне все равно нужно построить последнюю точку предыдущего дня и первую точку следующего дня (чтобы линия/кривая продолжалась), но не расширять представление диаграммы, чтобы включить эти точки. Я нарисовал линии там, где я хотел бы, чтобы диаграмма начиналась и заканчивалась.

У кого-нибудь есть идеи, как я могу этого добиться? Это дневная диаграмма приливов, поэтому нужно показать только кривую одного дня.

Вот код, который у меня сейчас есть:

 const chart = new Chart(this.$refs.myChart, {  type: "line",  data: {  labels: [  new Date(1634847780000), // Last of previous day - Low Tide  new Date(1634869320000), // High Tide 1  new Date(1634891880000), // Low Tide 1  new Date(1634913060000), // High Tide 2  new Date(1634935560000), // Low Tide 2  new Date(1634955720000), // First of next day - High Tide  ],  datasets: [  {  label: "My First dataset",  data: [0.7, 5.8, 0.8, 5.8, 0.8, 5.1], // Meters above sea  tension: 0.5,  backgroundColor: "#000000",  fill: {  target: "origin",  },  },  ],  },  options: {  interaction: {  mode: "point",  },  hover: {  mode: "point",  },  onHover: (e) =gt; {  const canvasPosition = getRelativePosition(e, chart);   // Substitute the appropriate scale IDs  const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);  const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);  console.log(dataY);  },  plugins: {  tooltip: {  enabled: true,  },  legend: {  display: false,  },  },  scales: {  xAxis: {  type: "time",  time: {  unit: "hour",  displayFormats: {  hour: "HH:mm",  },   // minUnit: moment(1634860800000).format("HH:mm"),  },  },  yAxis: {  ticks: {  callback: function(value, index, values) {  return value   "m";  },  },  },  },  },  });  

Заранее спасибо!

Вы можете использовать min и max proppertys на оси x, например, так:

 const chart = new Chart('chartJSContainer', {  type: "line",  data: {  labels: [  new Date(1634847780000), // Last of previous day - Low Tide  new Date(1634869320000), // High Tide 1  new Date(1634891880000), // Low Tide 1  new Date(1634913060000), // High Tide 2  new Date(1634935560000), // Low Tide 2  new Date(1634955720000), // First of next day - High Tide  ],  datasets: [{  label: "My First dataset",  data: [0.7, 5.8, 0.8, 5.8, 0.8, 5.1], // Meters above sea  tension: 0.5,  backgroundColor: "#000000",  fill: {  target: "origin",  },  }, ],  },  options: {  interaction: {  mode: "point",  },  hover: {  mode: "point",  },  onHover: (e) =gt; {  const canvasPosition = getRelativePosition(e, chart);   // Substitute the appropriate scale IDs  const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);  const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);  console.log(dataY);  },  plugins: {  tooltip: {  enabled: true,  },  legend: {  display: false,  },  },  scales: {  xAxis: {  type: "time",  min: new Date(1634853600000), // Should calculate this dynamic, not best way but can use: new Date().setHours(0,0,0,0)  max: new Date(1634939999000), // Should calculate this dynamic, not best way but can use: new Date().setHours(23,59,59)  time: {  unit: "hour",  displayFormats: {  hour: "HH:mm",  },   // minUnit: moment(1634860800000).format("HH:mm"),  },  },  yAxis: {  ticks: {  callback: function(value, index, values) {  return value   "m";  },  },  },  },  }, }); 

 lt;bodygt;  lt;canvas id="chartJSContainer" width="600" height="400"gt;lt;/canvasgt;  lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"gt;lt;/scriptgt;  lt;script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"gt;lt;/scriptgt; lt;/bodygt;