New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
堆叠面积图中的tooltip中应该默认有总计值 #3804
Comments
chart.tooltip({
shared: true,
showMarkers: false,
customContent: (name, items) => {
const container = document.createElement("div");
container.className = "g2-tooltip";
const title = `<div class="g2-tooltip-title" style="margin-top: 12px;margin-bottom: 12px;">${name}</div>`;
let listItem = "",
count = 0;
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (+item?.value === 0) continue;
count += +item?.value;
listItem += `<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;display:flex;align-items: center;">
<span style="background-color:${item?.mappingData?.color ||
item?.color};" class="g2-tooltip-marker"></span>
<span style="display:inline-flex;flex:1;justify-content:space-between">
<span style="margin-right: 16px;">${
item?.name
}:</span><span>${item?.value}</span>
</span>
</li>`;
}
listItem += `<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;display:flex;align-items: center;">
<span style="background-color: #abe1b1;" class="g2-tooltip-marker"></span>
<span style="display:inline-flex;flex:1;justify-content:space-between">
<span style="margin-right: 16px;">总数:</span><span>${count}</span>
</span>
</li>`;
container.innerHTML = title + listItem;
return container;
}
}); |
这个需要在业务层这中去实现,G2 层不会根据不同的图表,做一些定制的 UI。 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What problem does this feature solve?
堆叠面积图是充分展示了整体和部分的数值和关系, 但是目前我们却不能直观的知道每个点的整体值,只有每个部分的值
What does the proposed API look like?
在头部加入一列 [总计:XXX]
The text was updated successfully, but these errors were encountered: