flotr2는 가로 막 대형 차트의 타임 스탬프로 만 렌더링하지 않습니다.

Question

Flotr2를 사용하여 DateTime을 사용하여 일부 그래프를 렌더링하고 있습니다. 이것은 선 그래프로 잘 작동하지만 이제는 선 그래프와 막대 그래프를 카트에 렌더링해야합니다. 이것은 쉬워야하고 example on the flotr2 site가있다.

int 값을 사용하면 모든 것이 원하는대로 작동합니다. 이 값을 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은 datetime에서 작동하도록 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}} 
    }); 
}