折線圖問題

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

這可以通過不同的選項（刪除網格線）並使用標記僅在圖表上偽造網格線來實現：

代碼（有關有效的演示，請參見此小提琴 ）：

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文檔 ，應該可以的。

對於以該點為終點的線，請使用網格選項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