Chart.JS -多个框-注释-仅显示最后一个框

Question

我使用Chart.Js和chartjs-plugin-annotation来显示多个折线图，并使用注释将图表区域分成七个不同颜色的区域。

现在我试着从两个盒子开始。

X轴-以HH:m格式显示时间。Y轴-显示四个系列的值。

我面临的问题是我只看到第二个框，而不是第一个框。

另外，第二个框占据了整个图表区域。

这是我面临的问题的JSFiddle - https://jsfiddle.net/marathepa/16th0x3d/14/

我使用以下代码进行注释-

var options = {
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                displayFormats: timeFormat,
            }
        }]
    },
    plugins: {
        annotation: {
            annotations: {
                box1: {
                    type: "box",
                    drawTime: "beforeDatasetsDraw",
                    xMin: Val1,
                    xMax: Val2,
                    yMin: Val3,
                    yMax: Val4,
                    backgroundColor: XXXXXXXXXXXXX,
                    xScaleID: 'x-axis-0'

                },
                box2: {
                    type: "box",
                    drawTime: "beforeDatasetsDraw",
                    xMin: Val5,
                    xMax: Val6,
                    yMin: Val3,
                    yMax: Val4,
                    backgroundColor: Val3,
                    xScaleID: 'x-axis-0'
                }

            }
        }
    }
};

如果我给出注解-- yScaleID --它不会显示框的任何内容。

Val1、Val2、Val5和Val6使用与lables相同的时间格式(x轴)

当我将Val1、Val2、Val5和Val6硬编码为特定值时，我只看到第二个框。

问题似乎是- labels的日期值。标签是日期值，我需要在注释上使用xMin: Val1、xMax: Val2和Val5和Val6上的标签的子集。

解释这个问题的链接-

https://github.com/chartjs/chartjs-plugin-annotation/issues/438#event-4976403966

https://github.com/chartjs/chartjs-plugin-annotation/discussions/439#discussioncomment-966664

Answer 1

两件事。首先，您尝试以v2方式定义scales配置，但这不再起作用。您不应该将刻度定义为时间，因为您不使用time对象，要使用timeScale，您需要提供moment/luxon或任何其他日期库对象和相应的日期适配器，以便chart.js可以自动为刻度制作刻度。

此外，正如chart.js注释文档(https://www.chartjs.org/chartjs-plugin-annotation/guide/types/box.html#configuration)中所定义的，您需要为xMin和xMax属性提供一个数字，以便可以为其提供标签，并为其提供所需位置的索引。

现场示例：

​

var timeFormat = {
  'millisecond': 'HH:mm',
  'second': 'HH:mm',
  'minute': 'HH:mm',
  'hour': 'HH:mm',
  'day': 'HH:mm',
  'week': 'HH:mm',
  'month': 'HH:mm',
  'quarter': 'HH:mm',
  'year': 'HH:mm',
};


const options = {
  type: 'line',
  data: {
    labels: ['6:38', '6:38', '6:38', '6:38', '6:39', '6:39', '6:39', '6:39', '6:39', '6:39', '6:40', '6:40', '6:40', '6:40', '6:40', '6:40', '6:41', '6:41', '6:41', '6:41', '6:41', '6:41', '6:42', '6:42', '6:42', '6:42', '6:42', '6:42', '6:43', '6:43', '6:43', '6:43', '6:43', '6:43', '6:44', '6:44', '6:44', '6:44', '6:44', '6:44', '6:45', '6:45', '6:45', '6:45', '6:45', '6:45', '6:46', '6:46', '6:46', '6:46', '6:46', '6:46', '6:47', '6:47', '6:47', '6:47', '6:47', '6:47', '6:48', '6:48', '6:48', '6:48', '6:48', '6:48', '6:49', '6:49', '6:49', '6:49', '6:49', '6:49', '6:50', '6:50', '6:50', '6:50', '6:50', '6:50', '6:51', '6:51', '6:51', '6:51', '6:51', '6:51', '6:52', '6:52', '6:52', '6:52', '6:52', '6:52', '6:53', '6:53', '6:53', '6:53', '6:53', '6:53', '6:54', '6:54', '6:54', '6:54', '6:54', '10:54'],



    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 2, 19, 3, 5, 2, 2, 19, 3, 5, 2, 2, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      // New way of defining scales
      x: {
        grid: {
          color: 'red'
        }
      },
      y: {}
    },
    plugins: {
      annotation: {
        annotations: {
          box1: {
            type: "box",
            drawTime: "beforeDatasetsDraw",
            xMin: '6:39', // doesnt work, needs point index
            xMax: '7:00', // doesnt work, needs point index
            yMin: 2,
            yMax: 10,
            backgroundColor: "red",


          },
          box2: {
            type: "box",
            drawTime: "beforeDatasetsDraw",
            xMin: 7,
            xMax: 10.14,
            yMin: 2,
            yMax: 10,
            backgroundColor: "blue",

          }
        }
      }
    }
  }
}

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

document.getElementById("tt").addEventListener("click", () => {
  chart.options.plugins.annotation.annotations.box1.yMax = 16;
  chart.update();
});

document.getElementById("rr").addEventListener("click", () => {
  chart.options.plugins.annotation.annotations.box1.yMax = 8;
  chart.update();
});

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <button id="tt">Update annotation to 16</button>
  <button id="rr">Update annotation to 8</button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.js"></script>
</body>

​

使用moment：https://jsfiddle.net/Leelenaleee/bza0v3rc/11/实现time scale实现的基本示例