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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (16)

我有一个带有数据对象的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;
        });

因为我已经尝试过bootstrap类,但是没有它们在tooltipHTML中工作。

我想要的是这样的

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

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

指向codepen的链接

提问于
用户回答回答于

你做的很好。我只是没有看到你使用任何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/

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励