Диаграмма.JS - несколько полей - аннотации - отображает только последнее поле

ProgramBox

Диаграмма.JS — несколько полей — аннотации — отображает только последнее поле

Post author:admin
Запись опубликована:16 января, 2022
Post category:Вопросы по программированию

#chart.js #chartjs-plugin-annotation

Вопрос:

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

Прямо сейчас я пытаюсь начать с двух коробок.

Ось 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: 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

Ответ №1:

2 вещи. Сначала вы попытались определить scales конфигурацию способом v2, это больше не работает. Вы не должны определять свой масштаб как время, так как вы не используете объекты времени, чтобы использовать шкалу времени, необходимую для предоставления объектов библиотеки 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>

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

1. Как мне сделать — //импорт { de } из ‘date-fns/locale’; в файле Javascript? Будет использовать de для следующих — //,адаптеров: { // //дата: { // // язык: de ///} //}

2. В основном, глядя на … github.com/chartjs/chartjs-plugin-annotation/discussions/439

3. если вы используете модули npm, сделайте это, как вы сказали, если вы используете теги сценариев, я не знаю, не используйте библиотеку date-fns

4. Я использовал <script src=» cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/… > ><скрипт src=» cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/… > и это работает сейчас. Спасибо за вашу помощь.

Метки: Диаграмма.JS — несколько полей — аннотации — отображает только последнее поле