折线图问题

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

正在阅读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

Answer 2

这可以通过不同的选项（删除网格线）和使用标记来伪造网格线来达到图表：

代码（请参阅此 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"
  });  
}

折线图问题

Flot line chart issue

javascript

charts

flot