Flot графике выпуск

Question

мне нужно создать линейную диаграмму, как на картинке:

То, что я достиг до сих пор

var line_opt = { 
     series: { 
      lines: { show: true }, 
      points: { show: true } 
     }, 
     grid: { 
      hoverable: true, 
      clickable: true 
     }, 
     yaxis: { 
      min: 0, 
      max: 6, 
      autoscaleMargin: .5, 
      labelWidth: -15, 
      tickLength: 0, 
      tickFormatter: function suffixFormatter(val, axis) { 
       return (val.toFixed(0)); 
      } 
     }, 
     xaxis: { 
      tickSize: 1 
     } 
    }; 

var lineData = [ 
     [1, 5], [2, 4], [3, 4], [4, 4], [5, 3], [6, 4], [7, 4], [8, 3], [9, 4], [10, 3], 
     [11, 3], [12, 4], [13, 4], [14, 3], [15, 3], [16, 3], [17, 3], [18, 3], [19, 4], [20, 3], 
     [21, 3], [22, 3], [23, 3], [24, 2], [25, 2], [26, 3], [27, 2], [28, 2], [29, 2] 
    ]; 

Есть ли способ, что линии оси X начинать со дна диаграммы и заканчивать там, где находится точка (как на первом изображении), а также скрыть метки оси x без строк?

Answer 1

Это может быть достигнуто с различными вариантами (удаление линий сетки) и с помощью маркировки на поддельные линии сетки только до графика:

кода (см это fiddle для рабочего демо):

var line_opt = { 
    series: { 
    lines: { 
     show: true 
    }, 
    points: { 
     show: false 
    } 
    }, 
    grid: { 
    backgroundColor: { colors: ["#fff", "#ddd"] }, 
    hoverable: true, 
    clickable: true, 
    borderWidth: 0, 
    markings: [] 
    }, 
    yaxis: { 
    min: 0, 
    max: 6, 
    autoscaleMargin: .5, 
    //labelWidth: -15, 
    tickLength: 0, 
    tickFormatter: function suffixFormatter(val, axis) { 
     return (val.toFixed(0)); 
    } 
    }, 
    xaxis: { 
    ticks: false, 
    autoscaleMargin: .01, 
    tickSize: 1, 
    tickLength: 0 // only needed if ticks is not false 
    } 
}; 

var lineData = [ ... ]; 

for (var i=0; i < lineData.length; i++){ 
    line_opt.grid.markings.push({ 
    xaxis: { from: lineData[i][0], to: lineData[i][0] }, 
    yaxis: { from: 0, to: lineData[i][1] }, 
    lineWidth: 1, 
    color: "#aaaaaa" 
    }); 
} 

Answer 2

Чтение API documentation, должно быть возможно.

Для линий, заканчивающихся, где точка, использовать параметры сетки, то aboveData:

grid: { 
    show: boolean 
    aboveData: boolean 
    color: color 
    backgroundColor: color/gradient or null 
    labelMargin: number 
    axisMargin: number 
    markings: array of markings or (fn: axes -> array of markings) 
    borderWidth: number 
    borderColor: color or null 
    minBorderMargin: number or null 
    clickable: boolean 
    hoverable: boolean 
    autoHighlight: boolean 
    mouseActiveRadius: number 
    } 

Вы не должны нуждаться в XAxis для чего-нибудь в этой точке, вы можете просто скрыть:

xaxis, yaxis: { 
    show: null or true/false