Sebagai seorang developer .NET yang ingin menggunakan Highcharts untuk membuat grafik, Anda mungkin menghadapi masalah dalam menampilkan time dan date yang sesuai dengan requirement Anda. Dalam postingan ini, kita akan membahas bagaimana cara mengatasi masalah tersebut.

Masalah Awal

Anda memiliki kode berikut untuk membuat grafik scatter:

$(function () {
 $('#container').highcharts({
 // ...
 xAxis: {
 type: 'datetime',
 dateFormat: 'mm/dd/YY',
 // ...
 },
 yAxis: {
 type: 'datetime',
 // ...
 },
 series: [{
 name: 'User1',
 color: 'rgba(223, 83, 83, .5)',
 data: [[Date.UTC(2015, 0 , 01), 230807],
 [Date.UTC(2015, 0 , 02), 15085],
 [Date.UTC(2015, 0 , 04), 102158],
 [Date.UTC(2015, 11 , 07), 011211]] 
 }]
 });
});

Namun, Anda mengalami masalah dalam menampilkan time dan date yang sesuai dengan requirement Anda. Grafik scatter tidak menampilkan tanggal yang tepat pada sumbu X, serta tidak menampilkan waktu yang tepat pada sumbu Y.

Solusi

Untuk mengatasi masalah tersebut, Anda perlu mengonfigurasikan opsi xDateFormat dan dateTimeLabelFormats pada opsi Highcharts. Berikut adalah contoh kode:

$(function () {
 $('#container').highcharts({
 // ...
 xAxis: {
 type: 'datetime',
 dateFormat: 'mm/dd/YY',
 dateTimeLabelFormats: {
 month: '%e %b %Y',
 year: '%Y'
 },
 xDateFormat: '%e. %m. %Y'
 },
 yAxis: {
 type: 'datetime',
 dateTimeLabelFormats: {
 hour: '%l:%M'
 }
 },
 series: [{
 name: 'User1',
 color: 'rgba(223, 83, 83, .5)',
 data: [[Date.UTC(2015, 0 , 01), 230807],
 [Date.UTC(2015, 0 , 02), 15085],
 [Date.UTC(2015, 0 , 04), 102158],
 [Date.UTC(2015, 11 , 07), 011211]] 
 }]
 });
});

Dalam kode di atas, kita mengonfigurasikan opsi xDateFormat untuk menampilkan tanggal dalam format %e. %m. %Y. Kami juga mengonfigurasikan opsi dateTimeLabelFormats untuk menampilkan bulan dan tahun dalam format %e %b %Y dan %Y, serta waktu dalam format %l:%M.

Hasil

Dengan menggunakan konfigurasi di atas, Anda akan mendapatkan grafik scatter yang sesuai dengan requirement Anda. Grafik akan menampilkan tanggal yang tepat pada sumbu X, serta waktu yang tepat pada sumbu Y.

Semoga artikel ini membantu Anda dalam mengatasi masalah time dan date pada grafik scatter Highcharts!