Highcharts多图表独立滚动条及数据更新异常问题求助

Hey there! Let's work through each of your Highcharts issues with targeted fixes:

问题1：调用setData清除自定义样式及部分数据 #

When you use series[0].setData(), Highcharts resets the series to default configurations, wiping out any custom styles you've applied. Instead, use series.update() to modify only the data while preserving existing styles and settings:

// Replace this:
// chart1.series[0].setData(data.src10.series, false);
// With this:
chart1.series[0].update({ data: data.src10.series }, false);

This method lets you update just the data property without resetting the entire series configuration, keeping your custom styles intact.

问题2：redraw事件触发过多重绘（滚动条操作时） #

The redraw event fires on every minor chart change (like scrollbar drags), which causes unnecessary repeated calls to show_rank_limit. Instead of relying on this event, manually call your ranking function only after you've finished updating all chart data and settings:

1. Remove the redraw event listener from your initial chart configuration.
2. Add a manual call to show_rank_limit at the end of each button click handler, followed by a single final redraw:

$('#top10').click(function() {
  chart1.series[0].update({ data: data.src10.series }, false);
  chart1.xAxis[0].setCategories(data.src10.categories, false);
  chart1.xAxis[0].update({ scrollbar: { enabled: false } }, false);
  cfg.common.fun.show_rank_limit(chart1); // Manual call after all updates
  chart1.redraw(); // Apply all changes in one go
});

$('#top20').click(function() {
  chart1.series[0].update({ data: data.src20.series }, false);
  chart1.xAxis[0].setCategories(data.src20.categories, false);
  chart1.xAxis[0].update({ scrollbar: { enabled: true } }, false);
  cfg.common.fun.show_rank_limit(chart1); // Manual call after all updates
  chart1.redraw(); // Apply all changes in one go
});

This way, show_rank_limit only runs when you intentionally update the chart data, not on every scroll action.

问题3：点击「latest top 20」后无法向下滚动（保持10个排名高度） #

Two key fixes here:

1. Add the missing final redraw: Your original code didn't call chart1.redraw() after updating settings, so the scrollbar configuration never took effect. We added this in the button handlers above.
2. Lock the chart height: Set a fixed height for the chart to match the 10-entry layout, so it doesn't expand when loading 20 entries. Add this to your initial chart config:

var barchart1 = cfg.common;
barchart1.chart = {
  height: 400 // Adjust this value to match your exact 10-entry height
};
// ... rest of your initial chart configuration

With a fixed height, the 20 entries will overflow the plot area, and the scrollbar will work as expected.

问题4：特殊文本（空格、连字符）显示异常 + 支持HTML标签 #

Enable HTML rendering for x-axis labels to handle special characters and HTML tags correctly. Add this to your xAxis configuration:

barchart1.xAxis = {
  // ... your existing xAxis settings
  labels: {
    useHTML: true, // Enable parsing of HTML tags and proper handling of special text
    style: {
      whiteSpace: 'nowrap' // Optional: Prevent text wrapping if needed
    }
  }
};

Now text like AAAAA BBBBB, AAAA-BBBBB, and HTML tags like <b>Bold Text</b> will display correctly.

内容的提问来源于stack exchange，提问作者puff.tw