jquery - 当我将语言更改为阿拉伯语时，Highcharts 图例重叠

Question

我有一个使用 highcharts 的图表

这很完美，但是当我将我的页面转换为阿拉伯语时，所有的东西都像是重叠或从它们的位置移动。

我的脚本:

        <script type="text/javascript">
            $(document).ready(function() {
                Highcharts.setOptions({
                    legend:{
                        rtl : true
                    },
                    chart: {
                        type: 'line'
                    },

                    credits: {
                        enabled: false
                    },

                    //title: { text: ''},
                    //subtitle: { text:''},
                    //xAxis: { categories: '' },
                    yAxis: {
                        min : 0,
                        reversed: false,
                        title: {
                            text: 'Rank'
                        },

                        labels: {
                            formatter: function () {
                                return this.value ;
                            }
                        },
                    },
                    plotOptions: {
                        series: {
                            dataLabels: {
                                enabled: true,

                            },
                            animation: {
                                duration: 4000,
                            }
                        },
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}</b><br/>',
                        //animation: [true],
                        // pointFormat: '{point.x} Year: {point.y}'
                    }
                    //series: ''
                });

                var chart1 = new Highcharts.Chart({
                    chart:{renderTo:'chart1'},
                    title : <%= chart1Data %>,  //Here i recieve data from backend

                    });

设置主题和样式:

        <script id="GrayTheme" type="text/javascript">        //------------------------------------------ THEME
            /*
             * Gray theme for Highcharts JS
             * @author Torstein Hønsi
             */
            Highcharts.theme = {
                colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
                   "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
                chart: {
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                           [0, 'rgb(96, 96, 96)'],
                           [1, 'rgb(16, 16, 16)']
                        ]
                    },
                    //width: 600,
                    borderWidth: 0,
                    borderRadius: 15,
                    plotBackgroundColor: null,
                    plotShadow: false,
                    plotBorderWidth: 0
                },
                title: {
                    style: {
                        color: '#FFF',
                        font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                    }
                },
                subtitle: {
                    style: {
                        color: '#DDD',
                        font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                    }
                },
                xAxis: {
                    gridLineWidth: 0,
                    lineColor: '#999',
                    tickColor: '#999',
                    labels: {
                        style: {
                            color: '#999',
                            fontWeight: 'bold'
                        }
                    },
                    title: {
                        style: {
                            color: '#AAA',
                            font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                        }
                    }
                },
                yAxis: {
                    alternateGridColor: null,
                    minorTickInterval: null,
                    gridLineColor: 'rgba(255, 255, 255, .1)',
                    minorGridLineColor: 'rgba(255,255,255,0.07)',
                    lineWidth: 0,
                    tickWidth: 0,
                    labels: {
                        style: {
                            color: '#999',
                            fontWeight: 'bold'
                        }
                    },
                    title: {
                        style: {
                            color: '#AAA',
                            font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                        }
                    }
                },
                legend: {
                    itemStyle: {
                        color: '#CCC'
                    },
                    itemHoverStyle: {
                        color: '#FFF'
                    },
                    itemHiddenStyle: {
                        color: '#333'
                    }
                },
                labels: {
                    style: {
                        color: '#CCC'
                    }
                },
                tooltip: {
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                           [0, 'rgba(96, 96, 96, .8)'],
                           [1, 'rgba(16, 16, 16, .8)']
                        ]
                    },
                    borderWidth: 0,
                    style: {
                        color: '#FFF'
                    }
                },


                plotOptions: {
                    series: {
                        shadow: true
                    },
                    line: {
                        dataLabels: {
                            color: '#CCC'
                        },
                        marker: {
                            lineColor: '#333'
                        }
                    },
                    spline: {
                        marker: {
                            lineColor: '#333'
                        }
                    },
                    scatter: {
                        marker: {
                            lineColor: '#333'
                        }
                    },
                    candlestick: {
                        lineColor: 'white'
                    }
                },

                toolbar: {
                    itemStyle: {
                        color: '#CCC'
                    }
                },

                navigation: {
                    buttonOptions: {
                        symbolStroke: '#DDDDDD',
                        hoverSymbolStroke: '#FFFFFF',
                        theme: {
                            fill: {
                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                stops: [
                                   [0.4, '#606060'],
                                   [0.6, '#333333']
                                ]
                            },
                            stroke: '#000000'
                        }
                    }
                },

                // scroll charts
                rangeSelector: {
                    buttonTheme: {
                        fill: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                               [0.4, '#888'],
                               [0.6, '#555']
                            ]
                        },
                        stroke: '#000000',
                        style: {
                            color: '#CCC',
                            fontWeight: 'bold'
                        },
                        states: {
                            hover: {
                                fill: {
                                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                    stops: [
                                       [0.4, '#BBB'],
                                       [0.6, '#888']
                                    ]
                                },
                                stroke: '#000000',
                                style: {
                                    color: 'white'
                                }
                            },
                            select: {
                                fill: {
                                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                    stops: [
                                       [0.1, '#000'],
                                       [0.3, '#333']
                                    ]
                                },
                                stroke: '#000000',
                                style: {
                                    color: 'yellow'
                                }
                            }
                        }
                    },
                    inputStyle: {
                        backgroundColor: '#333',
                        color: 'silver'
                    },
                    labelStyle: {
                        color: 'silver'
                    }
                },

                navigator: {
                    handles: {
                        backgroundColor: '#666',
                        borderColor: '#AAA'
                    },
                    outlineColor: '#CCC',
                    maskFill: 'rgba(16, 16, 16, 0.5)',
                    series: {
                        color: '#7798BF',
                        lineColor: '#A6C7ED'
                    }
                },

                scrollbar: {
                    barBackgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                           [0.4, '#888'],
                           [0.6, '#555']
                        ]
                    },
                    barBorderColor: '#CCC',
                    buttonArrowColor: '#CCC',
                    buttonBackgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                           [0.4, '#888'],
                           [0.6, '#555']
                        ]
                    },
                    buttonBorderColor: '#CCC',
                    rifleColor: '#FFF',
                    trackBackgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                           [0, '#000'],
                           [1, '#333']
                        ]
                    },
                    trackBorderColor: '#666'
                },

                // special colors for some of the demo examples
                legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
                legendBackgroundColorSolid: 'rgb(70, 70, 70)',
                dataLabelsColor: '#444',
                textColor: '#E0E0E0',
                maskColor: 'rgba(255,255,255,0.3)'
            };

            // Apply the theme
            var highchartsOptions = Highcharts.setOptions(Highcharts.theme);


        </script>

请告诉我如何解决这个问题

Answer 1

如 Highcharts documentation 中所述, 使用 useHTML: true 选项。

你可以找到一个演示 here .