Mốc thời gian định dạng của biểu đồ trục Google Biểu đồ nhãn ngày giờ

Question

Tôi đang sử dụng GoogleCharts để vẽ biểu đồ dạng đường với loại 'datetime' dọc theo một trục. Tôi muốn định dạng các nhãn trục để chúng hiển thị thời gian trong một múi giờ được chỉ định thay vì múi giờ trình duyệt mặc định.

Từ đọc tài liệu, có một đối tượng DateFormat có thể được cung cấp với tùy chọn 'timeZone' và sau đó được gọi với DataTable và cột thích hợp để định dạng tất cả các ô trong cột đó. Tôi đã nhận thấy rằng thực hiện kết quả này trong các giá trị được định dạng đúng nếu DataTable được vẽ dưới dạng Bảng. Tuy nhiên, định dạng tương tự này không áp dụng cho nhãn trục trên biểu đồ như LineChart hoặc Bar.

Dưới đây là mã của tôi:

var dataTable = new google.visualization.DataTable(); 

dataTable.addColumn('datetime', 'Time'); 
dataTable.addColumn('number', 'Wolves'); 
dataTable.addRows([ 
    [new Date(2020, 1, 1, 12), 1], 
    [new Date(2020, 1, 1, 13), 3] 
]); 

// Create DateFormat with a timezone offset of -4 
var dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4}); 

// Format the first column 
dateFormat.format(dataTable, 0); 

dataTable.getFormattedValue(0, 0); // "February 1, 2020 at 8:00:00 AM UTC-4" 

var table = new google.visualization.Table(document.getElementById('wolf_table')); 
table.draw(dataTable); 

var lineChart = new google.visualization.LineChart(document.getElementById('wolf_chart')); 
lineChart.draw(dataTable); 

Dưới đây là bảng xếp hạng kết quả:

Lưu ý cách mà bảng hiển thị thời gian định dạng đúng trong các tế bào có liên quan, trong khi biểu đồ đường trục thời gian trình duyệt hiển thị (GMT trong trường hợp này).

Có cách nào thay đổi định dạng múi giờ của nhãn trục biểu đồ đường không? Có cái gì tôi có thể bị mất?

Answer 1

sử dụng hAxis.ticksconfiguration option để cung cấp các nhãn trục

khi dữ liệu đã được định dạng với DateFormat

xây dựng một mảng với các nhãn được hiển thị

ký hiệu sử dụng đối tượng để cung cấp giá trị (v:) và giá trị được định dạng (f:) cho mỗi nhãn

// Set X-Axis Labels 
var xTicks = []; 
for (var i = 0; i < dataTable.getNumberOfRows(); i++) { 
    xTicks.push({ 
    v: dataTable.getValue(i, 0), 
    f: dataTable.getFormattedValue(i, 0) 
    }); 
} 

nếu bạn không nhất thiết cần phải định dạng toàn bộ dataTable,
hoặc bạn muốn sử dụng nhãn không tồn tại trong dataTable,
sử dụng phương pháp formatValue trên DateFormat

// Set X-Axis Labels 
var xTicks = []; 
for (var i = 0; i < dataTable.getNumberOfRows(); i++) { 
    xTicks.push({ 
    v: dataTable.getValue(i, 0), 
    f: dateFormat.formatValue(dataTable.getValue(i, 0)) 
    });  
} 

/*** OR ***/  

// custom date, not in dataTable 
var customDate = new Date(2016, 9, 4, 22, 7, 7); 
xTicks.push({ 
    v: customDate, 
    f: dateFormat.formatValue(customDate) 
}); 

thấy làm việc tiếp theo đoạn ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn('datetime', 'Time'); 
 
    dataTable.addColumn('number', 'Wolves'); 
 
    dataTable.addRows([ 
 
     [new Date(2020, 1, 1, 12), 1], 
 
     [new Date(2020, 1, 1, 13), 3] 
 
    ]); 
 

 
    // Create DateFormat with a timezone offset of -4 
 
    var dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4}); 
 

 
    // Format the first column 
 
    dateFormat.format(dataTable, 0); 
 

 
    // Set X-Axis Labels 
 
    var xTicks = []; 
 
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) { 
 
     xTicks.push({ 
 
     v: dataTable.getValue(i, 0), 
 
     f: dataTable.getFormattedValue(i, 0) 
 
     }); 
 
    } 
 

 
    var table = new google.visualization.Table(document.getElementById('table_div')); 
 
    table.draw(dataTable); 
 

 
    var lineChart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    lineChart.draw(dataTable, { 
 
     hAxis: { 
 
     ticks: xTicks 
 
     } 
 
    }); 
 
    }, 
 
    packages:['corechart', 'table'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="table_div"></div> 
 
<div id="chart_div"></div>