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

wave
มานพ กองอุ่น 10 ม.ค. 2019, 12:37:47 630

หลายๆ ครั้งในการแสดงผลด้วยกราฟจาก 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],
                    ]
                ]) ?>

 


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 630
  • รักเลย 0
  • หมวดหมู่ Yii Framework 2 (Yii2)
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags highchart ภาษาไทย
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009

เนื้อหาที่เกี่ยวข้อง