Javascript 我能';t使用JChartFX在多Y轴和日期X轴图表中显示任何内容
我想画一张有三个Y轴和一个日期X轴的图表。解析Json时,我有以下数据数组:Javascript 我能';t使用JChartFX在多Y轴和日期X轴图表中显示任何内容,javascript,html,css,jchartfx,Javascript,Html,Css,Jchartfx,我想画一张有三个Y轴和一个日期X轴的图表。解析Json时,我有以下数据数组: var items = [ {"CoplanarIrradiance": 760,"AirTemperature": 35,"SurfaceTemperature": 32,"Time": "2014-Apr 27T18:15:00"}, {"CoplanarIrradiance": 460,"AirTemperature": 25,"SurfaceTemperature": 31,"Time":
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);
这是结果图表:
有什么问题?数据集是正确的
提前感谢我只能看到您使用的代码有一两个问题:
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);
确保您使用的是最新的位
我希望这有帮助。我应该如何设置Y轴或X轴的时间(hh:mm:ss)格式的最大值?