文章/答案/技术大牛

发布

社区首页 >问答首页 >flotr2不会只呈现条形图的时间戳。

问flotr2不会只呈现条形图的时间戳。
EN

Stack Overflow用户

提问于 2013-10-11 13:04:02

回答 1查看 754关注 0票数 0

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

javascript

flotr2

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-10-11 15:10:34

实际上，这在某种程度上是按要求工作的。这里有两个错误。

1是无法让flotr2工作的日期时间，所以我黑了一点。我使用int (long)将所有内容转换为getTime。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}}
    });
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19318874

复制

相似问题

问flotr2不会只呈现条形图的时间戳。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问flotr2不会只呈现条形图的时间戳。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问flotr2不会只呈现条形图的时间戳。
EN