Chart.JS - несколько - поле - аннотации - отображает только последнее поле

Question

Я использую Chart.Js и chartjs-plugin-annotation для отображения нескольких линейных графиков и аннотаций, чтобы разделить область диаграммы на семь зон разного цвета.

Прямо сейчас я пробую для начала с двумя коробками.

Ось X- отображает время - в формате ЧЧ: м. Ось 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: Salvage_Water_Color,
                                                    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 для определенных значений, я вижу только второе поле.

Answer 1

2 вещи. Сначала вы попытались определить scalesconfig способом v2, это больше не работает. Вы не должны определять свою шкалу как время, поскольку вы не используете объекты времени, чтобы использовать timeScale, вам нужно предоставить момент / люксон или любые другие объекты библиотеки даты и соответствующий адаптер даты, чтобы chart.js мог автоматически делать отметки для шкалы.

Также, как определено в документации по аннотации chart.js (https://www.chartjs.org/chartjs-plugin-annotation/guide/types/box.html#configuration), вам необходимо указать номер для xMin а также xMax prop, чтобы вы могли дать ему метку, вы даете ему индекс, где он должен его рисовать.

Живой пример:

Базовая скрипка с примером timeмасштабная реализация с моментом: https://jsfiddle.net/Leelenaleee/bza0v3rc/11/