Как я могу изменить дизайн линейной диаграммы с помощью ng2-chart?

введите здесь описание изображения

Это моя текущая диаграмма, которую я создал с помощью библиотеки ng2-charts. Он может выдавать мои данные в виде всплывающего окна при наведении курсора мыши.

Вместо этого мне нужен фиксированный блок, содержащий логотип и название моей компании. Я понятия не имею, как изменить этот html.

введите здесь описание изображения

Для получения списка компаний на данном этапе,

callbacks: {
        title: function (tooltipItems, data) {
          return (tooltipItems[0] || {})['xLabel'];
        },
        label: function (tooltipItems, data) {
          let dummyValue : any[] = [
                                      {id:123, user: "Test  Data 1", stage: "Stage 3"},
                                      {id:456, user: "Test  Data 2", stage: "Stage 3"},
                                      {id:789, user: "Test  Data 3", stage: "Stage 6"},
                                      {id:147, user: "Test  Data 4", stage: "Stage 6"}
                                    ];
          let result = [];
          dummyValue.forEach(element => {
            if (tooltipItems.xLabel === element.stage) {
              result.push(element.user);
            }
          });
          return result;
        }

angular ng2-charts ng2-bootstrap
person Dhwanil Patel    schedule 20.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете создать настраиваемую всплывающую подсказку, используя свойство custom и добавив функцию обратного вызова.

Например. Добавьте свойство tooltips в ваши ng2-диаграммы ChartOptions:

tooltips: {
      enabled: false,
      custom: 
      function(tooltipModel) {
                // Tooltip Element
                var tooltipEl = document.getElementById('chartjs-tooltip');

                // Create element on first render
                if (!tooltipEl) {
                    tooltipEl = document.createElement('div');
                    tooltipEl.id = 'chartjs-tooltip';
                    tooltipEl.innerHTML = '<table></table>';
                    document.body.appendChild(tooltipEl);
                }

                // Hide if no tooltip
                if (tooltipModel.opacity === 0) {
                    tooltipEl.style.opacity = 0;
                    return;
                }

                // Set caret Position
                tooltipEl.classList.remove('above', 'below', 'no-transform');
                if (tooltipModel.yAlign) {
                    tooltipEl.classList.add(tooltipModel.yAlign);
                } else {
                    tooltipEl.classList.add('no-transform');
                }

                function getBody(bodyItem) {
                    return bodyItem.lines;
                }

                // Set Text
                if (tooltipModel.body) {
                    var titleLines = tooltipModel.title || [];
                    var bodyLines = tooltipModel.body.map(getBody);

                    var innerHtml = '<thead>';

                    titleLines.forEach(function(title) {
                        innerHtml += '<tr><th>' + title + '</th></tr>';
                    });
                    innerHtml += '</thead><tbody>';

                    bodyLines.forEach(function(body, i) {
                        var colors = tooltipModel.labelColors[i];
                        var style = 'background:' + colors.backgroundColor;
                        style += '; border-color:' + colors.borderColor;
                        style += '; border-width: 2px';
                        var img = '<img width="20" height="20" style="background-color:pink; margin-right: 6px;" >';
                        var span = '<span style="' + style + '"></span>';
                        innerHtml += '<tr"><td>' + img  + span + body + '</td></tr>';
                    });
                    innerHtml += '</tbody>';

                    var tableRoot = tooltipEl.querySelector('table');
                    tableRoot.innerHTML = innerHtml;
                }

                // `this` will be the overall tooltip
                var position = this._chart.canvas.getBoundingClientRect();

                // Display, position, and set styles for font
                tooltipEl.style.opacity = 1;
                tooltipEl.style.position = 'absolute';
                tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
                tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
                tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
                tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
                tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
                tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
                tooltipEl.style.pointerEvents = 'none';
                tooltipEl.style.backgroundColor = 'rgba(0,0,0,0.8)';
                tooltipEl.style.color = 'rgb(255,255,255)';
            }
    },

Вы можете изменить тег <img>, чтобы добавить его в логотип вашей компании в качестве атрибута src в этой строке:

var img = '<img width="20" height="20" style="background-color:pink; margin-right: 6px;" >';

Вот мой кодовый код, который вы можете изучить: Ссылка Codepen ⚡

person terahertz    schedule 20.11.2019
comment
Привет, @terahertz, я проверил ваш код в обоих местах (введите свой код, а также проверьте ссылку), но он не отражает никаких изменений. Вы можете вкратце описать, как это работает? Моя текущая потребность - просто создать по одному динамическому блоку в каждой точке данных диаграммы. - person Dhwanil Patel; 20.11.2019
comment
В обоих случаях значение tooltipEl.querySelector ('table') возвращает нулевой ответ. И этот код не соответствует моим требованиям, мне нужен фиксированный блок html, а не всплывающее окно при наведении - person Dhwanil Patel; 20.11.2019
comment
Хм ... моя беда, ваша фотография ввела меня в заблуждение, указав на эту строку, ведущую к точке данных. Я отредактировал код, не могли бы вы взглянуть? Это то, чего вы пытаетесь достичь? Название компании и изображение компании не имеют ничего отношения к вашему набору данных, я прав? Дайте мне знать, если вы этого хотите, и я отредактирую свой ответ позже - person terahertz; 20.11.2019
comment
Большое спасибо @terahertz за то, что уделили ваше драгоценное время, я проверил вашу панель кода, это как-то так, как я хочу, но не совсем. Ваш разработанный блок правильный, но мне нужен этот блок в каждой точке данных при загрузке страницы. Для более подробной информации я привожу другое изображение. - person Dhwanil Patel; 20.11.2019
comment
На самом деле данные компании (название и логотип) я получил из бэкэнда, я фильтрую их на основе значения стадии (что я уже сделал) и распечатываю эти отфильтрованные данные в поле соответствующей точки данных стадии. Я также предоставляю один стандартный файл данных компании в формате json. - person Dhwanil Patel; 20.11.2019
comment
Итак, как отображается эта панель данных компании? Вы сказали, что он не должен отображаться при наведении курсора (для каждой точки данных) ранее, но вы хотите, чтобы он был рядом с каждой точкой данных. Ваш график станет очень загроможденным, если вы отобразите эту панель компании для каждой точки данных. В любом случае, описательная информация, такая как ваш предыдущий комментарий, должна быть изначально включена в ваш вопрос .... .... Во всяком случае, вы должны были спроектировать свои каркасы и подтвердить свое взаимодействие, прежде чем приступать к программированию. - person terahertz; 20.11.2019
comment
Я хочу сказать, что у меня уже есть данные о наведении курсора (не изображение), но мое требование показать некоторую коробку исправлений рядом с каждой точкой данных, которая показывает как название компании, так и логотип при загрузке страницы и не редактируется. Я отредактировал изображение проверки вопроса и json по умолчанию - person Dhwanil Patel; 20.11.2019