绘制折线图问题

时间:2016-01-18 08:56:08

标签: javascript charts flot

我需要在图片中创建一个折线图: line chart

到目前为止我所取得的成就是 my line chart

 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轴标签而没有线条?

2 个答案:

答案 0 :(得分:3)

这可以通过不同的选项(删除网格线)和使用标记来伪造网格线直到图表来实现:

chart preview

代码(有关工作演示,请参阅此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"
  });  
}

答案 1 :(得分:-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