我無法在JChartFX中顯示多個Y軸和日期X軸圖表中的任何內容

Question

我正在嘗試使用三個Y軸和一個日期X軸繪製圖表。當我解析我的Json時，我有這個數據數組：

var items = [ 
    {"CoplanarIrradiance": 760,"AirTemperature": 35,"SurfaceTemperature": 32,"Time": "2014-Apr  27T18:15:00"}, {"CoplanarIrradiance": 460,"AirTemperature": 25,"SurfaceTemperature": 31,"Time": "2014-Apr-27T18:30:00"}, {"CoplanarIrradiance": 341,"AirTemperature": 27,"SurfaceTemperature": 32,"Time": "2014-Apr-27T18:45:00"}, {"CoplanarIrradiance" 233,"AirTemperature": 31,"SurfaceTemperature": 32,"Time": "2014-Apr-27T19:00:00"}, ... ] 

但是我不會去繪製圖表。它只出現X軸，這是不正確的。 這是我的代碼：

     chart1.setDataSource(data);  


     // Eje de Tiempo (X) 
     var axis = chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date); 
     chart1.getAxisX().getLabelsFormat().setCustomFormat(";MMM-dd"); 

     // Eje de Coplanar Irradiance(Y) 
     var axis1 = chart1.getAxisY(); 
     axis1.getTitle().setText("Coplanar Irradiance (W/m2)"); 
     axis1.getGrids().getMajor().setVisible(false); 
     axis1.getDataFormat().setFormat(cfx.AxisFormat.Number); 
     axis1.getDataFormat().setDecimals(2); 

     // Eje de Air Temperature (Y) 
     var axis2 = chart1.getAxisY2(); 
     axis2.getTitle().setText("Air Temperature (C)"); 
     axis2.setPosition(cfx.AxisPosition.Near); 
     axis2.getGrids().getMajor().setVisible(false); 
     chart1.getAxisY2().getDataFormat().setFormat(cfx.AxisFormat.Number); 
     axis2.getDataFormat().setDecimals(2); 

     // Eje de Surface Temperature (Y) 
     var axis3 = new cfx.AxisY(); 
     chart1.getAxesY().add(axis3); 
     axis3.getTitle().setText("Surface Temperature (C)"); 
     axis3.setVisible(true); 
     axis3.setPosition(cfx.AxisPosition.Far); 
     axis3.getLabelsFormat().setFormat(cfx.AxisFormat.Number); 
     axis3.getDataFormat().setDecimals(2); 

     // Especificamos que hay tres series de datos. 
     chart1.getData().setSeries(3); 

     var series1 = chart1.getSeries().getItem(0); 
     var series2 = chart1.getSeries().getItem(1); 
     var series3 = chart1.getSeries().getItem(2); 

     series1.setAxisY(axis1); 
     series2.setAxisY(axis2); 
     series3.setAxisY(axis3); 

     series1.setGallery(cfx.Gallery.Lines); 
     series2.setGallery(cfx.Gallery.Lines); 
     series3.setGallery(cfx.Gallery.Lines); 

     // ----Assign data fields-------- 
     var fields = chart1.getDataSourceSettings().getFields(); 

     var field = new cfx.FieldMap(); 
     var field2 = new cfx.FieldMap(); 
     var field3 = new cfx.FieldMap(); 

     field.setName("CoplanarIrradiance"); 
     field.setUsage(cfx.FieldUsage.Number); 
     fields.add(field); 

     field2.setName("AirTemperature"); 
     field2.setUsage(cfx.FieldUsage.Number); 
     fields.add(field2); 

     field3.setName("SurfaceTemperature"); 
     field3.setUsage(cfx.FieldUsage.Number); 
     fields.add(field3); 

     var legendBox = chart1.getLegendBox(); 
     legendBox.setDock(cfx.DockArea.Bottom); 
     legendBox.setContentLayout(cfx.ContentLayout.Center); 

     // ----Set Sample Data------------ 
     var divHolder = document.getElementById('meteo_pop_up_grafica_imagen'); 
     chart1.create(divHolder); 

這是結果的圖表：

問題是什麼？數據集是正確的。

在此先感謝

Answer 1

我只能看到與代碼的一個或兩個問題你正在使用：

1. 在數據源的日期時間字段必須確認到ISO 8601格式YYYY-MM -ddTHh：mm：ss.fffZ，例如2014-04-27T18：15：00.000Z。
2. 我瞭解你只包括你的數據源的一個小樣本，原始來源可能包含幾天的日期。如果是這種情況，則在X軸中使用日期格式將是正確的。但是，如果您想傳遞較小的數據集並主要關注時間而不是日期，則應格式化X軸以使用時間。

其餘的代碼工作得很好。使用jChartFX的最新版本和下面的代碼（這幾乎是你的代碼，上面提到的兩個變化），我得到了預期的圖表。

var items = [ 
    { "CoplanarIrradiance": 760, "AirTemperature": 35, "SurfaceTemperature": 32, "Time": "2014-04-27T18:15:00.000Z" }, 
    { "CoplanarIrradiance": 460, "AirTemperature": 25, "SurfaceTemperature": 31, "Time": "2014-04-27T18:30:00.000Z" }, 
    { "CoplanarIrradiance": 341, "AirTemperature": 27, "SurfaceTemperature": 32, "Time": "2014-04-27T18:45:00.000Z" }, 
    { "CoplanarIrradiance": 233, "AirTemperature": 31, "SurfaceTemperature": 32, "Time": "2014-04-27T19:00:00.000Z" } 
]; 


chart1.setDataSource(items); 

// Eje de Tiempo (X) 
var axisX = chart1.getAxisX(); 
axisX.getLabelsFormat().setFormat(cfx.AxisFormat.Time); 

//var axis = chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date); 
//chart1.getAxisX().getLabelsFormat().setCustomFormat(";MMM-dd"); 

// Eje de Coplanar Irradiance(Y) 
var axis1 = chart1.getAxisY(); 
axis1.getTitle().setText("Coplanar Irradiance (W/m2)"); 
axis1.getGrids().getMajor().setVisible(false); 
axis1.getDataFormat().setFormat(cfx.AxisFormat.Number); 
axis1.getDataFormat().setDecimals(2); 

// Eje de Air Temperature (Y) 
var axis2 = chart1.getAxisY2(); 
axis2.getTitle().setText("Air Temperature (C)"); 
axis2.setPosition(cfx.AxisPosition.Near); 
axis2.getGrids().getMajor().setVisible(false); 
chart1.getAxisY2().getDataFormat().setFormat(cfx.AxisFormat.Number); 
axis2.getDataFormat().setDecimals(2); 

// Eje de Surface Temperature (Y) 
var axis3 = new cfx.AxisY(); 
chart1.getAxesY().add(axis3); 
axis3.getTitle().setText("Surface Temperature (C)"); 
axis3.setVisible(true); 
axis3.setPosition(cfx.AxisPosition.Far); 
axis3.getLabelsFormat().setFormat(cfx.AxisFormat.Number); 
axis3.getDataFormat().setDecimals(2); 

// Especificamos que hay tres series de datos. 
chart1.getData().setSeries(3); 

var series1 = chart1.getSeries().getItem(0); 
var series2 = chart1.getSeries().getItem(1); 
var series3 = chart1.getSeries().getItem(2); 

series1.setAxisY(axis1); 
series2.setAxisY(axis2); 
series3.setAxisY(axis3); 

series1.setGallery(cfx.Gallery.Lines); 
series2.setGallery(cfx.Gallery.Lines); 
series3.setGallery(cfx.Gallery.Lines); 

// ----Assign data fields-------- 
var fields = chart1.getDataSourceSettings().getFields(); 

var field = new cfx.FieldMap(); 
var field2 = new cfx.FieldMap(); 
var field3 = new cfx.FieldMap(); 

field.setName("CoplanarIrradiance"); 
field.setUsage(cfx.FieldUsage.Number); 
fields.add(field); 

field2.setName("AirTemperature"); 
field2.setUsage(cfx.FieldUsage.Number); 
fields.add(field2); 

field3.setName("SurfaceTemperature"); 
field3.setUsage(cfx.FieldUsage.Number); 
fields.add(field3); 

var legendBox = chart1.getLegendBox(); 
legendBox.setDock(cfx.DockArea.Bottom); 
legendBox.setContentLayout(cfx.ContentLayout.Center); 

確保您使用的是最新的位。

我希望這會有所幫助。