如何在 ChartJS 中的 x 轴上为新的一天设置垂直线 v3.x

Question

我有一个图表显示最近 2 小时、8 小时、24 小时或 48 小时的数据。这可以通过网页上的按钮进行更改。当时间跨度包括午夜时，我想在午夜显示带有小标签（可能悬停）的垂直线，显示即将到来的日期（或星期几）。

我还没有找到关于如何在 Chartjs 3 中执行此操作的任何资源。我将如何完成这样的任务？

这就是我创建图表的方式。 “时间”是纪元时间数组：

chart = new Chart(
    document.getElementById('Chart'),
    {
        type: 'line',
        data:
        {
            labels: time,
            datasets: [
            {
                label: dataObjects[start].label,
                backgroundColor: dataObjects[start].backgroundColor,
                borderColor: dataObjects[start].borderColor,
                fill: dataObjects[start].fill,
                data: dataObjects[start].data,
                yAxisID: 'A',
            }]
        },
        options: {
            elements: {point: {radius: 0.5, borderWidth: 1},
                       line: {borderWidth: 3}},
            maintainAspectRatio: false,
            scales: {
                x:
                {
                    //max: last_time,
                    type: "time",
                    grid: {borderColor: color.time},
                    ticks: {color: color.time},
                    time: {
                        unit: 'hour',
                        tooltipFormat: 'dd.MM. HH:mm',
                        displayFormats: {
                            second: "HH:mm",
                            minute: "HH:mm",
                            hour: "HH:mm",
                            day: "d.MM.",
                            week: "d.MM."
                        },
                    }
                },
                A:
                {
                    type: 'linear',
                    grid: {borderColor: color.time},
                    position: 'left',
                    ticks: {color: color.time},
                    suggestedMin: dataObjects[start].suggestedMin,
                    suggestedMax: dataObjects[start].suggestedMax,
                    title: {text: dataObjects[start].text,
                            display: true,
                            color: color.time}
                }
            },
            plugins: {
                legend: {display: false}
            }
        }
});

Answer 1

您可以使用 mixed chart 混合折线图和条形图来创建此图形。

这里可以查看一个例子：

https://codepen.io/alyf-mendonca/pen/dyZZoeB

HTML:


    <div>
      <canvas id="myChart"></canvas>
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

JS:


    const labels = [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
        ];
    
        const data = {
      labels: [
        '20:00',
        '21:00',
        '22:00',
        '23:00',
        '00:00',
        '01:00',
        '02:00'
      ],
      datasets: [{
        type: 'line',
        label: 'Bar Dataset',
        data: [20, 21, 23, 22, 21, 20, 23],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)'
      }, {
        type: 'bar',
        label: 'Line Dataset',
        data: [0, 0, 0, 0, 50, 0, 0],
        fill: false,
        borderColor: 'rgb(54, 162, 235)'
      }]
    };
    
        const config = {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    x: {
                        stacked: true
                    }
                }
            },
        };
      
    
    const myChart = new Chart(
          document.getElementById('myChart'),
          config
        );

Answer 2

您可以使用 annotation plugin。在你的情况下，你需要将我用来确定正确 x 轴位置的字符串更改为你想要的午夜时间戳，然后你在那里有一行：

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'pink'
    }]
  },
  options: {
    plugins: {
      annotation: {
        annotations: {
          line1: {
            type: 'line',
            xMin: 'Green',
            xMax: 'Green',
            label: {
              enabled: true,
              content: 'end value'
            }
          },
          line2: {
            type: 'line',
            xMin: 'Blue',
            xMax: 'Blue',
            label: {
              enabled: true,
              content: 'begin value'
            }
          }
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.3.1/chartjs-plugin-annotation.min.js"></script>
</body>

如何在 ChartJS 中的 x 轴上为新的一天设置垂直线 v3.x

How to set vertical lines for new day on x-axis in ChartJS v3.x

javascript

chart.js