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 使用与标签（x 轴）相同的时间格式

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

问题似乎是 - 标签的日期值。标签是日期值，我需要在 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

2 件事。首先，您尝试以 v2 方式定义 scales 配置，这不再有效。您不应该将比例定义为时间，因为您不使用时间对象，要使用您需要提供的时间比例 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>

基本 fiddle time 刻度实施示例：https://jsfiddle.net/Leelenaleee/bza0v3rc/11/

Chart.JS - multiple - box - annotations - 只显示最后一个框

Chart.JS - multiple - box - annotations - displays only the last box

chartjs-plugin-annotation