Question

我正在尝试在我的页面中绘制图表。能够正确设置图表值。但是没有设置值。因为这最终会得到空间。

var DataSet1 = [ 
                 [new Date("2014/03/03").getTime(), 0],
                [new Date("2014/03/10").getTime(), 16 ],
                [new Date("2014/03/17").getTime(), 32 ],
                [new Date("2014/03/24").getTime(), 189],
                [new Date("2014/03/31").getTime(), 250]         ];

    var DataSet2 = [ 
                 [new Date("2014/03/03").getTime(), 0],
                [new Date("2014/03/10").getTime(), 40],
                [new Date("2014/03/17").getTime(), 20 ],
                [new Date("2014/03/24").getTime(), 180],
                [new Date("2014/03/31").getTime(), 230] ];


        /* to find last 4 weeks mondays */

            var newDate = new Date();
            var day = newDate.getDay();
            var date = newDate.getDate();
            var xaxisArray = [];
            for(var i = 0;i<5;i++){if(i!=0){
                    var tempnewDate = new Date(setNewDate);
                    setNewDate =tempnewDate.setDate(tempnewDate.getDate()-(7));
                    xaxisArray.push(setNewDate);
                } else {
                    setNewDate =newDate.setDate(date-day+1);
                    xaxisArray.push(setNewDate);
                }               
            }

            $.plot($("#chart-revenue2"),[
                { data: DataSet1,label: "#FST",},
                { data: DataSet2, label: "SCND", 
                   points: { show: true },
                   lines: { show: true,fill: false},
                   yaxis: 2,color:"#C76C6B"} ] ,
                {
                  xaxis: 
                        {
                            mode: "time", 
                            min: xaxisArray[4],
                            max:xaxisArray[0],
                            timeformat: "%d/%m/%y",
                            ticks: xaxisArray.reverse(),
                            minTickSize :30
                        }
                    , yaxes: [
                            {   
                                 min:0, max: 400,  tickSize: 50 
                            },
                            {                   
                                position: "right",
                                min:0, max: 300,  tickSize: 50                              
                            }
                        ], 
                         series: {                        
                            lines: { 
                                show: true,
                                lineWidth: 3, 
                                fill: true
                           },
                           shadowSize: 0,
                       },
                        grid: {backgroundColor: { colors: ["#ffffff", "#f4f4f4"] }},
                        colors: ["#294777"],
                        legend: { show: true, container: '#chart-revenue1-table' }

            });

请查看我的fiddle ..

Answer 1

您已将x轴上的最大值设置为超出您拥有数据的最后一个点。你期望它做什么？它没有数据，所以它留空。如果您希望轴适合，请将其设置为max: new Date("2014/03/31").getTime()，或者更好，但不要设置最大值并让flot为您自动缩放。

Answer 2

问题是如何计算轴刻度的日期。创建newDate时，它有小时，分钟和秒，然后包含在每个刻度中。确保它们全部为零并且它们都排成一行：

var newDate = new Date()
newDate.setHours(0);
newDate.setMinutes(0);
newDate.setSeconds(0);

可能有更好的方法可以做到这一点，我还没有查看过：）

在此处查看：http://jsfiddle.net/ryleyb/htsBz/1/

值在flot图表中设置

2 个答案: