0

我正在使用 Flotr2 使用 DateTime 渲染一些图形。这一直很好地处理折线图，但我现在需要在购物车上渲染折线图和条形图。这应该很容易，并且在 fltr2 站点上有一个示例。

当我使用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 的限制？

4

1 回答 1

0

这实际上在某种程度上可以按预期工作。这里有2个错误。

1 是无法让 flotr2 与日期时间一起工作，所以我破解了一点。我使用 getTime将所有内容转换为int( )。longFlotr2 似乎喜欢这样，如果他们得到安抚，那么一切都很好。

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

另一个问题是条形图的时间段太多......所以，条形图“显示”但在如此小的范围内它是肉眼看不见的。更改为 

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}}
    });
}
于 2013-10-11T15:10:34.040 回答