Question

我有一个现场的Flot Chart并生成在图表上显示的随机数字。它仅用作虚拟对象，因此我不需要真实的实时数据。我希望图表在yaxis上从0开始，在xaxis上从100开始，使其看起来尽可能真实。下面是我在js文件中的代码。

 var data = [], totalPoints = 100
h = 0

function getRandomData() {

    //h = h + 1
    //return h  
    //data.push(h)

  if (data.length > 0)
    data = data.slice(1)

  // Do a random walk
  while (data.length < totalPoints) {

    var prev = data.length > 0 ? data[data.length - 1] : 50,
        y    = prev + Math.random() * 10 - 5,


    if (y < 0) {
      y = 0
    } else if (y > 100) {
      y = 100
    }

    data.push(y)
  }

  // Zip the generated y values with the x values
  var res = []
  for (var i = 0; i < data.length; ++i) {
    res.push([i, data[i]])
  }

  return res
}

var interactive_plot = $.plot('#interactive', [getRandomData()], {
  grid  : {
    borderColor: '#f3f3f3',
    borderWidth: 1,
    tickColor  : '#f3f3f3'
  },
  series: {
    shadowSize: 0, // Drawing is faster without shadows
    color     : '#3c8dbc'
  },
  lines : {
    fill : true, //Converts the line chart to area chart
    color: '#3c8dbc'
  },
  yaxis : {
    min : 0,
    max : 100,
    show: true
  },
  xaxis : {

    show: true
  }
})

var updateInterval = 500 //Fetch data ever x milliseconds
var realtime       = 'on' //If == to on then fetch data every x seconds. else stop fetching
function update() {

  interactive_plot.setData([getRandomData()])

  // Since the axes don't change, we don't need to call plot.setupGrid()
  interactive_plot.draw()
  if (realtime === 'on')
    setTimeout(update, updateInterval)
}

//INITIALIZE REALTIME DATA FETCHING
if (realtime === 'on') {
  update()
}
//REALTIME TOGGLE
$('#realtime .btn').click(function () {
  if ($(this).data('toggle') === 'on') {
    realtime = 'on'
  }
  else {
    realtime = 'off'
  }
  update()
})
/*
 * END INTERACTIVE CHART
 */

有一个按钮可以将Flot图表调用为动作并且效果很好，但它看起来太像阶段图表了。我需要它从y轴的0开始，x轴的100。关于如何解决这个问题的任何信息都会很棒，非常感激。

Answer 1

在开始之前用{0}填充data数组，然后update函数开始一次添加一个随机点，而不是从100个随机数据点开始：

for (var i = 0; i < totalPoints; i++) {
    data.push(0);
}

有关完整示例，请参阅this fiddle。

PS：请用分号结束你的代码行！

从0开始实时Flot Chart

1 个答案: