Question

我使用Flotr2使用DateTime渲染一些图形。这一直在使用线图很好，但我现在需要在购物车上渲染线图和条形图。这应该很简单，并且有example on the flotr2 site。

当我使用int值时，一切都按预期工作。当我将其更改为DateTime时，它会失败，因为折线图会根据需要显示，但条形图根本不会显示。

下面是我的Javascript（带有注释掉的DateTime值）

function CreateRequiredChart(container)
{   
var bars = {
    data: [],
    bars: {
        show: true,
        barWidth: 0.03,
        lineWidth: 0,
        fillColor: {
            colors: ['#f00', '#f66'],
            start: 'top',
            end: 'bottom'
        },
        fillOpacity: 1
      }
    },
    lines = {
        data: [],
        lines: {
            show: true,
            fillColor: ['#900', '#EDC13E', '#4DD43B'],
            fill: true,
            fillOpacity: 1
        }
    };

    //The next lines displays the result which is desired (in that both line and bar graphs are shown). Comment these out and uncomment the next section to see the fault
    bars.data.push([1, 7]);
    lines.data.push([0, 4], [1, 9], [2, 5], [3, 3]);    

    /*The next 2 lines do not display as desired. The line graph works, the bar graph does not
    bars.data.push([new Date('01/01/2013 08:30:00'), 7]);       
    lines.data.push([new Date('01/01/2013 08:29:00'), 5], [new Date('01/01/2013 08:30:00'), 8], [new Date('01/01/2013 08:31:00'), 4]);
    */

    graph = Flotr.draw(container, [lines, bars], {
                  HtmlText: false,
                  yaxis: {
                      showLabels: true,
                      title: "Value"                
                  },
                  xaxis: {
                      mode: "time",
                      timeformat: "%H%M%S",
                      minorTickFreq: 1,
                      showLabels: true,
                      title: "Time from start of logging",
                      labelsAngle: 90
                    },
                  grid: {
                    verticalLines: true,
                    backgroundColor: ['#fff', '#ccc']
                  }
               });
           }

我做错了什么，或者这是flotr2的限制？

Answer 1

这实际上是按照需要工作的。这里有2个故障。

1是无法让flotr2与日期时间一起工作所以我黑了一点。我使用getTime将所有内容转换为int（long）。 Flotr2似乎喜欢这样，如果它们被安抚，那么一切都很好。

var dt = new Date('01/01/2013 08:29:00');
var dt2 = new Date('01/01/2013 08:30:00');
var dt3 = new Date('01/01/2013 08:31:00');
var x = dt.getTime();
var y = dt2.getTime();
var z = dt3.getTime();

bars.data.push([y, 8]);     
lines.data.push([x, 5], [y, 7], [z, 3]);

另一个问题是条形图的时间段太长了......所以，条形图是＆＃34;显示＆＃34;但是在如此小的范围内，它是不可见的。改为

barWidth: 2000

完整代码

function CreateRequiredChart(container, title, dataForGraph, errorPoints)
    {   
    var bars = {
        data: [],
        bars: {
            show: true,
            order:1,
            //barWidth: 1000000,
              barWidth: 2000,
            lineWidth: 0,
            fillColor: {
                colors: ['#f00', '#f66'],
                start: 'top',
                end: 'bottom'
            },
            fillOpacity: 1
        }
    },
    lines = {
            data: [],
            lines: {
                show: true,
                fillColor: ['#900', '#EDC13E', '#4DD43B'],
                fill: true,
                fillOpacity: 1
            }
        };


    var dt = new Date('01/01/2013 08:29:00');
    var dt2 = new Date('01/01/2013 08:30:00');
    var dt3 = new Date('01/01/2013 08:31:00');
      var x = dt.getTime();
      var y = dt2.getTime();
      var z = dt3.getTime();




    bars.data.push([y, 8]);     
    lines.data.push([x, 5], [y, 7], [z, 3]);


//    Please note, you can't have 'HtmlText: true' and rotate the text! It is one or the other, hence why 'HtmlText: false'.   
    Flotr.draw(
    container, [lines, bars], {
       HtmlText: false,
       yaxis: {
                showLabels: true,
                title: "Value"              
            },
       xaxis: {
                mode: "time",
                showLabels: true,
                title: "Time from start of logging",
                labelsAngle: 90
            },
        grid: {
            verticalLines: true,
            backgroundColor: ['#fff', '#ccc']
            },
            series:{bars:{show:true}}
    });
}

flotr2不会仅使用时间戳呈现条形图

1 个答案: