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

flotr2 will not render with timestamp for bar charts only

本文关键字：条形图 时间戳 flotr2      更新时间：2023-09-26

我正在使用Flotr2使用DateTime渲染一些图形。这已经很好地处理了折线图，但现在我需要在购物车上呈现折线图和条形图。这应该很容易，在flotr2网站上有一个示例。

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

这实际上在一定程度上是按预期工作的。这里有 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]);

另一个问题是时间段对于条形图来说太多了......因此，条形图正在"显示"，但在如此小的范围内，肉眼看不见。更改为 

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}}
    });
}
相关文章：