Highstock dataGrouping问题：切换范围选择器后系列重叠

Hey, great catch on this issue! I’ve verified that the problem you described does exist in the official Highstock example you shared—when clicking range selector buttons with custom dataGrouping configurations, the original (ungrouped or previously grouped) series isn’t properly cleared from the chart. This leads to multiple series instances overlapping, which is definitely not the intended behavior.

Temporary Workarounds #

While we wait for an official fix, here are a couple of workarounds you can try to mitigate the issue:

• Force Series Update on Button Click:
  Add a click event listener to the range selector that manually updates the series with the active button’s data grouping settings, triggering a full redraw to clear old series data. Here’s how to modify your configuration:

  rangeSelector: {
      allButtonsEnabled: true,
      buttons: [/* Your existing button configs */],
      buttonTheme: { width: 60 },
      selected: 2,
      events: {
          click: function(e) {
              const activeButton = this.buttons[e.currentTarget.index];
              if (activeButton.dataGrouping) {
                  // Update the first series with the button's data grouping rules
                  this.chart.series[0].update({
                      dataGrouping: activeButton.dataGrouping
                  }, true); // Pass true to trigger immediate redraw
              }
          }
      }
  }
  

• Explicitly Clear Series Data (Alternative):
  If the above doesn’t work, you can explicitly remove and re-add the series when switching buttons. Note that this might have minor performance impacts, but it ensures old data is cleared:

  events: {
      click: function(e) {
          const chart = this.chart;
          const activeButton = this.buttons[e.currentTarget.index];
          const originalData = chart.series[0].options.data;
          
          // Remove existing series
          chart.series[0].remove();
          
          // Add series back with the active data grouping config
          chart.addSeries({
              name: 'AAPL',
              data: originalData,
              dataGrouping: activeButton.dataGrouping,
              marker: {
                  enabled: null,
                  radius: 3,
                  lineWidth: 1,
                  lineColor: '#FFFFFF'
              },
              tooltip: { valueDecimals: 2 }
          });
      }
  }
  

Next Steps #

1. Check for Updates: First, confirm you’re using the latest version of Highstock. Sometimes bugs like this get patched in minor version releases, so updating might resolve the issue immediately.
2. Report the Bug: Submit a detailed bug report to the Highstock official issue tracker. Include your code snippet, the official example reference, and details about your environment (Highstock version, browser, etc.)—this helps the development team replicate and fix the issue faster.

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