海軍報線圖問題

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

這可以用不同的選項（去除網格線），並使用標記，以假網格線只到圖中可以實現210

代碼（見本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 
    } 

在這一點上你應該不需要爲任何一個x軸，你可以將其隱藏：

：

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