แก้ปัญหาการแสดงผลภาษาไทยเพี้ยนใน HighChart

หลายๆ ครั้งในการแสดงผลด้วยกราฟจาก HighChart แล้วเกิดปัญหาการแสดงวรรณยุกต์และสระผิดเพี้ยนไป ทำให้กราฟดูไม่ถูกต้องสวยงาม ในส่วนที่เป็น Label ทั้งหลาย วิธีการแก้ไขได้แก่การกำหนดให้ใช้  HTML นั่นเอง

'useHTML' => true,

ตัวอย่าง

<?= Highcharts::widget([
                    'scripts' => [
                        'highcharts-more'
                    ],
                    'options' => [
                        'chart' => [
                            'polar' => true,
                            'type' => 'line'
                        ],
                        'subtitle' => [
                            'useHTML' => true,
                            'text' => 'ที่มา : IMD World Competitiveness Yearbook  2014 – 2018'
                        ],
                        'title' => [
                            'useHTML' => true,
                            'text' => 'สมรรถนะปัจจัยหลักของประเทศไทย พ.ศ.2560',
                        ],
                        'pane' => [
                            'size' => '80%'
                        ],
                        'xAxis' => [
                            'labels' => [
                                'useHTML' => true,
                            ],
                            'categories' => ['สมรรถนะทางเศรษฐกิจ', 'ประสิทธิภาพภาครัฐ', 'ประสิทธิภาพภาคธุรกิจ', 'โครงสร้างพื้นฐาน']
                        ],
                        'yAxis' => [
                            'useHTML' => true,
                            'title' => ['text' => 'ระดับสมรรถนะ']
                        ],
                        'plotOptions' => [
                            'line' => [
                                'dataLabels' => [
                                    'useHTML' => true,
                                    'enabled' => true
                                ]
                            ]
                        ],
                        'series' => [
                            ['name' => '2560', 'data' => [10, 20, 25, 49]],
                        ],
                        'legend' => [
                            'useHTML' => true,
                        ],
                        'tooltip' => [
                            'useHTML' => true,
                            'valueSuffix' => ''
                        ],
                        'credits' => ['enabled' => false],
                    ]
                ]) ?>