内容丰富 HTML 的工具提示无助于创建所需的 UI？

Question

我有一个包含数据对象的 XYChart

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

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

            }
        ]
    }];

和一系列工具提示HTML适配器作为

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;
        });

因为我已经尝试了 bootstrap 类但没有一个在工具提示中有效 HTML.

我想要的是这样的

但我到目前为止试过是这样的

请帮助或参考是否有另一种在工具提示中添加真正丰富的方法HTML

一个link到codepen

Answer 1

你做的很好。我只是没有看到你使用任何 bootstrap4 css class。您可以使用 bootstrap4 built-in classes 或您自己的自定义样式来实现您想要的效果。

//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/

内容丰富 HTML 的工具提示无助于创建所需的 UI？

Tooltips with rich HTML content does not help in creating desired UI?

amcharts

amcharts4