javascript - grafic c3 - afișează axa x a seriei temporale în timpul local AM/PM


Folosesc biblioteca de grafice C3 și am date de tip series temporale în care valorile pentru axa X sunt în format UTC ISO 8601, de exemplu 2017-01-27T11:24:36.012Z (același format pe care îl obții folosind new Date().toISOString()). Doresc să afișez marcajele (ticks) în ora locală.

Am configurat diagrama după cum urmează...

var now = new Date().toISOString();

  this.lineChart = generate({
    bindto: '#line',
    transition: {
      duration: 1000
    },        
    data: {
      x: 'x',
      xFormat: '%Y-%m-%dT%H:%M:%S.%LZ',
       columns: [
      ['x', now], 
      ['data1', 0]                   
    ]
    },
    axis: {
      x: {
        type: 'timeseries',
        localtime: true,
        tick: {
          format: '%H:%M %p',
          culling : true,
          rotate : 60
        }
      }
    }
  });

și apoi să încarc date suplimentare, unde am un timp de început și un timp de sfârșit, și vreau să afișez un punct la fiecare 15 minute..

  let startTime = new Date(startDateTime);
  let endTime = new Date(endDateTime);
  let nextDate = startTime;
  let dates = new Array<string>();
  dates.push(nextDate.toISOString());
  let data = [];
  while (nextDate <= endTime) {
    nextDate = moment(nextDate).add(30, 'm').toDate();
    dates.push(nextDate.toISOString());
    data.push(0); // to make them show up!
  }

  this.lineChart.load({
    columns: [
      ['x', ...dates],
      ['myData', ...data]          
    ]
  })

Aceasta produce următoarele...

Două lucruri sunt greșite aici.

  1. Datele sunt în timpul UTC, adică prima valoare 22:00 este UTC; ora locală ar trebui să fie +8:00 ore (pentru regiunea mea)

  2. Dacă 22:00 ar fi fost corect, aș fi crezut că ar trebui să apară ca 10:00 PM, nu în format de 24 de ore.

Din câte pot să văd, șirurile de formatare par corecte.

Cine știe ce ar putea fi în neregulă aici?

Mulțumesc anticipat pentru orice ajutor.