Flot график продлить линии до конца диаграммы

Question

Я пытался расширить «Linechart» на графике в начале и в конце холста. Но мне не повезло с этим

Опции для карт флота.

///initialize default chart options 
chartCtx.options = { 
    grid: { 
     hoverable: true, 
     clickable: true, 
     tickColor: "#d5d5d5", 
     borderWidth: 0, 
     color: '#d5d5d5' 
    }, 
    colors: ["#1ab394", "#464f88"], 
    tooltip: true, 
    xaxis: { 
     mode: "time", 
     timezone: "browser", 
     tickSize: [5, 'minute'], 
     tickLength: 0, 
     axisLabel: "Minutes", 
     axisLabelUseCanvas: true, 
     axisLabelFontSizePixels: 12, 
     axisLabelFontFamily: 'Arial', 
     axisLabelPadding: 10, 
     color: "#d5d5d5" 
    }, 
    yaxes: [ 
     { 
      position: "left", 
      max: 2370, 
      color: "#d5d5d5", 
      axisLabelUseCanvas: true, 
      axisLabelFontSizePixels: 12, 
      axisLabelFontFamily: 'Arial', 
      axisLabelPadding: 3 
     }, 
     { 
      position: "right", 
      color: "#d5d5d5", 
      axisLabelUseCanvas: true, 
      axisLabelFontSizePixels: 12, 
      axisLabelFontFamily: ' Arial', 
      axisLabelPadding: 67, 
      tickFormatter: function (x) { 
       return x; 
      } 
     } 
    ], 
    legend: { 
     noColumns: 2, 
     labelBoxBorderColor: "#d5d5d5", 
     position: "sw", 
     margin:[0 , -40] 
    } 
}; 

//init default chart dataset 
chartCtx.dataset = [ 
    { 
     label: chartCtx.Bar.Label, 
     data: chartCtx.Bar.Dataset, 
     color: "#1ab394", 
     bars: { 
      show: true, 
      align: "center", 
      barWidth: 5 * 60 * 600, 
      lineWidth:1 
     } 
    }, 
    { 
     label: chartCtx.Line.Label, 
     data: chartCtx.Line.Dataset, 
     yaxis: 2, 
     color: "#464f88", 
     lines: { 
      lineWidth: 1, 
      show: true, 
      fill: true, 
      fillColor: { 
       colors: [ 
        { 
         opacity: 0.2 
        }, 
        { 
         opacity: 0.2 
        } 
       ] 
      } 
     }, 
     points : { 
      show : true , 
      radius : 4 
     } 
    } 
]; 

Dataset для барграфа

[[1439351830973.464], [1439352130973.574], [1439352430973.177], [1439352730973.784], [1439353030973.902], [1439353330973 , 2586], [1439353630973,7061], [1439353930973,1091], [1439354230973,2451], [1439354530973.182], [1439354830973,3557]]

Dataset для рёберного графа является

[[1439351830973,936], [1439352130973, 1961], [1439352730973,1981], [1439352730973,448], [1439353330973,982], [1439353630973,5606], [1439353930973,5865] [1439354230973,1979], [1439354530973,4495], [1439354830973,2305]]

Не могли бы вы, ребята, мне точку в правильном направлении. Спасибо ..

Answer 1

Вы сопоставляете линию с барами с одинаковыми значениями x.

Вы можете добавить еще два значения в начало и конец линейного графического массива, поэтому оно выходит за пределы холста.

var buffer = 5 * 60 * 600; // or whatever number to change the timestamp 

[[1439351830973-buffer,936] // new array element 
[[1439351830973,936],[1439352130973,619],[1439352430973,1981],[1439352730973,448],[1439353030973,297],[1439353330973,982],[1439353630973,5606],[1439353930973,5865],[1439354230973,1979],[1439354530973,4495],[1439354830973,2305]], 
[1439354830973+buffer,2305]] // new array element 

Но тогда возникает вопрос, какие значения использовать для значений y для этих новых элементов массива? Вы можете использовать то же значение, что и предпоследние значения, поэтому линейный график торможяется горизонтально.