0

3 つの 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);

そして、これが結果チャートです。

ここに画像の説明を入力

何が問題ですか？データセットは正しいです。

前もって感謝します

4

1 に答える 1

1

使用しているコードには 1 つまたは 2 つの問題しか見られません。

  1. データ ソースの日時フィールドは、ISO 8601 形式 yyyy-MM-ddTHH:mm:ss.fffZ (2014-04-27T18:15:00.000Z など) に準拠している必要があります。
  2. データ ソースの小さなサンプルのみが含まれており、元のソースには数日にわたる日付が含まれている可能性があることを理解しています。その場合は、X 軸で日付形式を使用するのが正しいでしょう。ただし、より小さなデータ セットを渡し、主に日付ではなく時間に焦点を当てたい場合は、X 軸をフォーマットして Time を使用する必要があります。

コードの残りの部分は問題なく動作します。jChartFX の最新ビルドと以下のコード (上記の 2 つの変更を加えたほとんどのコード) を使用すると、予想されるチャートが得られます。

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);

最新のビットを使用していることを確認してください。

これが役立つことを願っています。

于 2014-06-10T11:06:05.950 に答える