Chart.JS 从 00:00am 开始，在 23:59pm 结束

Question

我需要一些建议。

我有以下图表：

我想在 00:00 开始图表 XAxis 并在 23.59 结束，但我仍然必须绘制前一天的最后一个点和第二天的第一个点（以便 line/curve 继续关闭），但不扩展图表视图以包括这些点。我在图表开始和结束的位置画了线。

有人知道我怎样才能做到这一点吗？由于是每日潮汐图，所以只需要显示一天的曲线即可。

这是我目前拥有的代码：

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) => {
                        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";
                                },
                            },
                        },
                    },
                },
            });

提前致谢！

Answer 1

您可以像这样在 x 轴上使用 min 和 max 属性：

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) => {
      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";
          },
        },
      },
    },
  },
});

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

Chart.JS 从 00:00am 开始，在 23:59pm 结束

Chart.JS Starting at 00:00am and ending at 23:59pm

charts

chart.js

vue-chartjs