Question

我正在尝试使用 epoch.js 创建一个简单的实时图表，该图表会在点击事件中自行更新。

我在下面发布的代码共有3个功能。它们是：
1）生成随机值
2）以毫秒为单位生成当前日期和时间。
3）更新图表数据点的onclick事件。

虽然我按照图表的要求提供了正确格式的数据点。我无法更新它。

感谢任何帮助，找出图表无法正常工作的原因。

///////////////this function generates the date and time in milliseconds//////////
function getTimeValue() {
  var dateBuffer = new Date();
  var Time = dateBuffer.getTime();
  return Time;
}

////////////// this function generates a random value ////////////////////////////
function getRandomValue() {
  var randomValue = Math.random() * 100;
  return randomValue;
}

////////////// this function is used to update the chart values ///////////////	
function updateGraph() {
  var newBarChartData = [{
    label: "Series 1",
    values: [{
      time: getTimeValue(),
      y: getRandomValue()
    }]
  }, ];
  barChartInstance.push(newBarChartData);
}

////////////// real time graph generation////////////////////////////////////////	  
var barChartData = [{
  label: "Series 1",
  values: [{
    time: getTimeValue(),
    y: getRandomValue()
  }]
}, ];

var barChartInstance = $('#barChart').epoch({
  type: 'time.bar',
  axes: ['right', 'bottom', 'left'],
  data: barChartData
});

<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js">
  </script>
  <script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/d3.min.js">
  </script>
  <script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.css">
</head>

<div id="barChart" class="epoch category10" style="width:320px; height: 240px;"></div>
<p id="updateMessage" onclick="updateGraph()">click me to update chart</p>

Answer 1

更新图表时，您将错误的对象推送到barChartInstance。您只需要推送包含新数据点的数组，而不是再次推送完整配置。

function updateGraph() {
  var newBarChartData = [{time: getTimeValue(), y:getRandomValue()}];

  /* Wrong: don't use the full configuration for an update.
  var newBarChartData = [{
    label: "Series 1",
    values: [{
      time: getTimeValue(),
      y: getRandomValue()
    }]
  }, ];
  */
  barChartInstance.push(newBarChartData);
}

＆＃13;

///////////////this function generates the date and time in milliseconds//////////
function getTimeValue() {
  var dateBuffer = new Date();
  var Time = dateBuffer.getTime();
  return Time;
}

////////////// this function generates a random value ////////////////////////////
function getRandomValue() {
  var randomValue = Math.random() * 100;
  return randomValue;
}

////////////// this function is used to update the chart values ///////////////	
function updateGraph() {
  var newBarChartData = [{time: getTimeValue(), y:getRandomValue()}];

  /*
  var newBarChartData = [{
    label: "Series 1",
    values: [{
      time: getTimeValue(),
      y: getRandomValue()
    }]
  }, ];
  */
  barChartInstance.push(newBarChartData);
}

////////////// real time graph generation////////////////////////////////////////	  
var barChartData = [{
  label: "Series 1",
  values: [{
    time: getTimeValue(),
    y: getRandomValue()
  }]
}, ];

var barChartInstance = $('#barChart').epoch({
  type: 'time.bar',
  axes: ['right', 'bottom', 'left'],
  data: barChartData
});

＆＃13;

<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js">
  </script>
  <script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/d3.min.js">
  </script>
  <script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.css">
</head>

<div id="barChart" class="epoch category10" style="width:320px; height: 240px;"></div>
<p id="updateMessage" onclick="updateGraph()">click me to update chart</p>

＆＃13;

使用epoch.js生成实时图表

1 个答案: