如何为Google分组堆叠柱状图添加分组累计悬停值？

Got it, let's fix that tooltip issue so it shows the cumulative sum when hovering over each segment. Here's how you can modify your Google Charts code to achieve this:

Step-by-Step Explanation #

1. Calculate Cumulative Values: For each group (each bar), we'll sum up values from the first segment to the current one as we iterate through each segment.
2. Add Custom Tooltip Columns: We'll extend your original data table with tooltip columns that display the cumulative sum for each segment.
3. Use the Modified Data Table: Pass the updated data to the chart renderer, and it will automatically use our custom tooltips.

Modified Code Example #

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  // Original data (replace with your actual data)
  var originalData = google.visualization.arrayToDataTable([
    ['Group', 'Segment 1', 'Segment 2', 'Segment 3', 'Segment 4'],
    ['Group A', 1000, 1500, 1000, 2000],
    ['Group B', 800, 1200, 900, 1800]
  ]);

  // Create a new DataTable to hold data + tooltips
  var dataWithTooltips = new google.visualization.DataTable();
  // Add the group label column first
  dataWithTooltips.addColumn('string', originalData.getColumnLabel(0));

  // Iterate through each segment column to add value and tooltip columns
  for (var colIndex = 1; colIndex < originalData.getNumberOfColumns(); colIndex++) {
    // Add the numeric value column
    dataWithTooltips.addColumn('number', originalData.getColumnLabel(colIndex));
    // Add a tooltip column with the 'tooltip' role
    dataWithTooltips.addColumn({type: 'string', role: 'tooltip'});
  }

  // Populate the new DataTable with values and cumulative tooltips
  for (var rowIndex = 0; rowIndex < originalData.getNumberOfRows(); rowIndex++) {
    var rowData = [originalData.getValue(rowIndex, 0)];
    var cumulativeTotal = 0;

    for (var segIndex = 1; segIndex < originalData.getNumberOfColumns(); segIndex++) {
      var segmentValue = originalData.getValue(rowIndex, segIndex);
      cumulativeTotal += segmentValue;

      // Add the segment value and the cumulative tooltip text
      rowData.push(segmentValue);
      rowData.push(`Cumulative: ${cumulativeTotal}`); // Customize tooltip text here
    }

    dataWithTooltips.addRow(rowData);
  }

  // Chart options (keep your existing options, add tooltip settings if needed)
  var options = {
    isStacked: true,
    tooltip: {
      isHtml: false // Set to true if you want HTML-styled tooltips
    },
    // Add your other existing options (colors, labels, etc.)
    title: 'Grouped Stacked Bar Chart with Cumulative Tooltips',
    height: 400
  };

  // Draw the chart with the modified data
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(dataWithTooltips, options);
}

Key Notes #

• Customizing Tooltip Text: You can adjust the tooltip string (e.g., Cumulative: ${cumulativeTotal}) to match your preferred format—add segment names, currency symbols, or anything else you need.
• HTML Tooltips: If you want styled tooltips (like bold text or colors), set tooltip.isHtml to true and use HTML in the tooltip string (e.g., <strong>Cumulative:</strong> ${cumulativeTotal}).
• Grouped vs. Stacked: This code works for stacked column/bar charts (each group has stacked segments). If your chart is "grouped stacked" (multiple stacks per group), the logic still applies—just ensure you're calculating cumulative sums within each stack group.

内容的提问来源于stack exchange，提问作者peXeq