折线图问题

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