Всплывающие подсказки с богатым содержимым HTML не помогают в создании желаемого интерфейса?

Question

У меня есть XYChart с объектом данных, таким как

chart.data = [{
        "Area": "Korangi",
        "AreaNumber": 120,
        "SubArea": [{
            "SubAreaName": "Korangi-1",
            "SubAreaNumber": 60

        }, {
                "SubAreaName": "Korangi-2",
                "SubAreaNumber": 60

            }
        ]
    }];

и адаптер tooltipHTML серии как

series.tooltipHTML = `<center><strong> {Area}:</strong>
        <strong> {AreaNumber}%</strong></center>
        <hr />`;

    series.adapter.add("tooltipHTML",
        function (html, target) {
            if (
                target.tooltipDataItem.dataContext &&
                target.tooltipDataItem.dataContext.SubArea &&
                target.tooltipDataItem.dataContext.SubArea.length
            ) {
                var nameTalClientsNumberCells = "";
                Cells = "";
                target.tooltipDataItem.dataContext.SubArea.forEach(part => {
                    if (part.SubAreaName != null) {
                        nameTalClientsNumberCells +=
                            `<tr><td><strong>${part.SubAreaName}</strong>:&nbsp ${part
                            .SubAreaNumber}%</td></tr>`;
                    }
                    //TalClientsNumberCells += `<td>${part.SubAreaNumber}</td>`;
                });
                html += `<table>
    ${nameTalClientsNumberCells}
</table>`;
            }

            return html;
        });

Поскольку я пробовал классы начальной загрузки, но ни один из них не работает в tooltipHTML.

то, что я хочу, похоже на это

но я пробовал до сих пор, как это

Пожалуйстапомогите или обратитесь, если есть другой способ добавить действительно богатый HTML во всплывающей подсказке

Ссылка на codepen

Answer 1

То, что вы делаете, прекрасно. Я просто не видел, чтобы вы использовали класс bootstrap4 css. Вы можете достичь желаемого с помощью встроенных классов bootstrap4 или собственных пользовательских стилей.

//I don't need to set tooltipHTML since I have the adapter hook up to return 
// custom HTML anyway

/*
series.tooltipHTML = `<center><strong> {Area}:</strong>
        <strong> {AreaNumber}%</strong></center>
        <hr />`;
*/

series.adapter.add("tooltipHTML", function (html, target) {
    let data = target.tooltipDataItem.dataContext;
    if (data) {
        let html = `
            <div class="custom-tooltip-container">
                <div class="col-left">
                    <h5>${data.Area}</h5>
                    <ul class="list-unstyled">
                    ${data.SubArea.map(part =>
                    `
                        <li class="part">
                            <span class="name">${part.SubAreaName}</span>
                            <span class="area">${part.SubAreaNumber}%</span>
                        </li>
                    `
                    ).join('')}
                    </ul>
                </div>
                <div class='col-right'>
                    <span class="badge badge-pill badge-success">${data.AreaNumber}%</span>
                </div>
            </div>
        `;

        return html;
    }

    return '';
});

А вот и пользовательские стили:

#chart {
    height: 31rem;
}

.custom-tooltip-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    min-width: 13rem;
}

.custom-tooltip-container .col-left {
    width: 70%;
}

.custom-tooltip-container .col-right {
    width: 30%;
    text-align: center;
}

.custom-tooltip-container .col-right .badge {
    font-size: 1.1rem;
}

.custom-tooltip-container .part {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

Опять же, вы можете делать все, что захотите. Здесь, в качестве демонстрации, я просто быстро все собрал.

демо: https://jsfiddle.net/davidliang2008/6g4u2qw8/61/