RTL语言（阿拉伯语）适配HighCharts饼图异常的修复方案咨询

Let me walk you through some targeted fixes for the legend color and layout problems you're seeing when switching to Arabic:

1. Force Legend Text Color to Fix White Text #

The white text is almost certainly due to inherited styles conflicting with RTL mode. Override it directly in your Highcharts config:

Highcharts.setOptions({
  legend: {
    itemStyle: {
      color: '#222' // Pick a color that contrasts with your chart background
    }
  }
});

If that doesn't stick, add a CSS override to target the SVG text elements directly:

.highcharts-legend-item text {
  fill: #222 !important;
}

2. Properly Configure RTL Mode for Layout #

The hasbidibug flag is mostly for older Highcharts versions with BiDi rendering bugs—modern versions rely on the official rtl property instead. Combine it with useHTML for more reliable RTL layout:

Highcharts.chart('your-chart-container', {
  chart: {
    type: 'pie',
    rtl: true // Enable global RTL rendering
  },
  legend: {
    useHTML: true, // Fixes layout alignment issues in RTL
    align: 'right', // Align legend to the right for Arabic
    verticalAlign: 'middle',
    layout: 'vertical', // Adjust layout direction as needed
    itemDistance: 18 // Space out legend items to prevent overlap
  },
  // Rest of your chart data/config...
});

3. Manually Adjust Legend Position to Fix Misalignment #

RTL can throw off Highcharts' automatic position calculations. Tweak the x/y offsets to get things back in place:

legend: {
  x: -15, // Negative values move it left, positive right—adjust for your layout
  y: 0,
  // Keep other legend configs from step 2
}

4. Isolate Chart Container from Global RTL CSS #

If your site uses global direction: rtl styles, they might interfere with Highcharts' internal layout. Add a wrapper style to contain the chart:

.chart-wrapper {
  direction: rtl;
  text-align: right;
}
.highcharts-container {
  direction: rtl !important;
}

Additional Notes #

• Double-check your Highcharts version—if you're on an older release, consider updating, as newer versions have better RTL support.
• The hasbidibug flag is likely causing more harm than good here, so remove it from your config.

Reference visuals:

• English environment (normal): [English normal pie chart legend]
• Arabic environment (broken): [Arabic legend misaligned + white text]
• Arabic on red background (broken): [Red background Arabic legend issue]

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