The issue has been closed

堆叠面积图中的tooltip中应该默认有总计值 #3804

ColinChen2 posted onGitHub

I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

堆叠面积图是充分展示了整体和部分的数值和关系, 但是目前我们却不能直观的知道每个点的整体值,只有每个部分的值

What does the proposed API look like?

在头部加入一列 [总计:XXX]

Screen Shot 2022-02-09 at 5 16 52 PM

如果还没有解决方案的话，可以试下这种方式：

posted by AlcoholTobaccoCode almost 3 years ago

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

posted by AlcoholTobaccoCode almost 3 years ago

这个需要在业务层这中去实现，G2 层不会根据不同的图表，做一些定制的 UI。

posted by hustcc over 1 year ago

Fund this Issue

$0.00

Funded

Pull requests

堆叠面积图中的tooltip中应该默认有总计值 #3804

What problem does this feature solve?

What does the proposed API look like?

Company

Community

Support

Connect