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

因为我尝试了引导程序类，但其中的一个都不在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/

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

1 个答案: