0

私はjqplotを初めて使用しますが、非常に重要なプロジェクトで使用しています。私はx軸に毎日1つの「目盛り」を持たせようとしています-現在のところ、複数の目盛りがあります。これがスクリーンショットです：

ここに画像の説明を入力してください

これがコードです（この投稿で参照されているように、最小値と最大値も追加しました）：

 $(document).ready(function(){

                            var ajaxDataRenderer = function(url, plot, options) {
                                var ret = null;
                                $.ajax({
                                    async: false,
                                    url: url,
                                    type: "GET",
                                    dataType:"json",
                                    data: {metricName: ""},
                                    success: function(data) {
                                        ret = data;
                                    },
                                    error:function (xhr, ajaxOptions, thrownError){
                                        alert(xhr.responseText);
                                    }    
                                });
                                return ret;
                            };

                            //var jsonurl = "reports/reportData.json";
                            var jsonurl = "tenant/metrics/get.json";

                            var today = new Date();

                            var plot2 = $.jqplot('chart2', jsonurl,{
                                title: "",
                                dataRenderer: ajaxDataRenderer,
                                dataRendererOptions: {unusedOptionalUrl: jsonurl},
                                axes: {
                                    xaxis: {
                                        'numberTicks' : 7,
                                        min: '2012-10-05',
                                        max: today,
                                        renderer:$.jqplot.DateAxisRenderer,
                                        rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
                                        tickInterval: '1 day',
                                        tickOptions:{formatString:'%Y-%#m-%#d'

                                        }
                                        //rendererOptions: {sdaTickInterval: [1, 'month']}

                                    },
                                    yaxis: {
                                        label: "MB",
                                        tickOptions:{formatString:'%d '},
                                        // Comment the next line out to allow negative values (and therefore rounded ones)
                                        min: 0
                                    }
                                }   
                            });
                        });

次のように手動でクリックを設定した場合でも、次のようになります。

 $(document).ready(function(){

                            var ajaxDataRenderer = function(url, plot, options) {
                                var ret = null;
                                $.ajax({
                                    async: false,
                                    url: url,
                                    type: "GET",
                                    dataType:"json",
                                    data: {metricName: ""},
                                    success: function(data) {
                                        ret = data;
                                    },
                                    error:function (xhr, ajaxOptions, thrownError){
                                        alert(xhr.responseText);
                                    }    
                                });
                                return ret;
                            };

                            //var jsonurl = "reports/reportData.json";
                            var jsonurl = "tenant/metrics/get.json";

                            var today = new Date();

                            var plot2 = $.jqplot('chart2', jsonurl,{
                                title: "",
                                dataRenderer: ajaxDataRenderer,
                                dataRendererOptions: {unusedOptionalUrl: jsonurl},
                                axes: {
                                    xaxis: {
                                        'numberTicks' : 7,
                                        min: '2012-10-05',
                                        max: today,
                                        renderer:$.jqplot.DateAxisRenderer,
                                        rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
                                        ticks: ['2012-10-05','2012-10-06','2012-10-07','2012-10-08', today],
                                        tickOptions:{formatString:'%Y-%#m-%#d'

                                        }
                                        //rendererOptions: {sdaTickInterval: [1, 'month']}

                                    },
                                    yaxis: {
                                        label: "MB",
                                        tickOptions:{formatString:'%d '},
                                        // Comment the next line out to allow negative values (and therefore rounded ones)
                                        min: 0
                                    }
                                }   
                            });
                        });

マークが正しい日付と一致していません。これがスクリーンショットです： ここに画像の説明を入力してください

これを行うための正しい方法はありますか？各x軸の目盛りを1つの日付にし、データ入力マークをその目盛りの軸上に配置します。

これは私を夢中にさせています！助けてください！

また、これが私のjsonです

[[["2012-10-05 10:57:16AM", 0],["2012-10-05 11:02:14AM", 2449],["2012-10-08 08:17:47AM", 9639],["2012-10-08 08:17:53AM", 224768],["2012-10-09 07:43:19AM", 9640],["2012-10-09 07:44:01AM", 224769]]]
4

1 に答える 1

1

タイムスタンプが含まれていないため、フォーマット文字列が正しくありません。次のように変更してみてください。

tickOptions:{formatString:'%y-%#m-%#d%n%#I:%#M:%#S%p}

または、タイムスタンプが必要ない場合は、フォーマット文字列をそのままにして、JSONからタイムスタンプを削除します。

編集

上記のフォーマット文字列が機能しない場合は、以下の値を使用して、一致するように値を操作してみてください。

// Year
%Y  2008
%y  08

// Month
%m  09
%#m  9
%B  September
%b  Sep

// Day
%d  05
%#d  5
%e  5
%A  Sunday
%a  Sun
%w  0, 0 = Sunday, 6 = Saturday
%o  th, The ordinal suffix string following the day of the month

// Hour
%H  23
%#H  3
%I   11
%#I  3
%p  PM, AM or PM

// Minute
%M  09
%#M  9

// Second
%S  02
%#S  2
%s  1206567625723, Unix timestamp, seconds past 1970-01-01 00:00:00

// Millisecond
%N  008
%#N  8

これがお役に立てば幸いです。

于 2012-10-09T17:52:08.960 に答える