Axure原型设计：如何设计随固定时间间隔的动态图表？

Question

在Axure中，能否可实现折线图随时间变化自动画图？
更准确的描述是：设计物联网监测系统中，每隔固定时间（比如10s)需要读取数据库中的数据并展示在页面中，Axure如何实现这一功能？ 在这一情景中，需要展示的数据可以通过全局变量来存储。

Answer 1

引自免费微信小程序：皆我百晓生

要实现这个需求，我们可以利用Axure的流程定义工具来创建一个循环动画，让折线图随着固定的周期（例如10秒）更新数据。以下是具体的步骤和示例代码：

步骤 1: 创建流程图

首先，在Axure中创建一个新的流程图。在这个流程图上，你需要添加两个输入节点（分别代表数据源和输出节点），然后为每个节点分配一个事件，以便后续操作。

步骤 2: 添加循环动作

接下来，在流程图上添加一个Repeat动作，并设置它的参数。在这个例子中，我们想让折线图跟随数据库中的数据进行更新。

• 重复次数 设置为 10。
• 执行频率 设置为 每10秒。

这将使折线图在指定的时间间隔内重复更新数据。

步骤 3: 使用全局变量保存数据

为了确保数据不丢失，我们需要在全局变量中存储这些数据。这里我们将使用一个简单的数组来存储数据。

// 全局变量
let data = [];

// 增加数据到数组
function addData(value, timestamp) {
    data.push({ value, timestamp });
}

// 获取数据从数组
function getData(timestamp) {
    return data.find(item => item.timestamp === timestamp);
}

步骤 4: 更新折线图

现在，当用户点击按钮时，我们就可以调用addData()函数来增加新的数据点，同时根据getData()获取最新的数据，然后更新折线图。

<button onclick="addData('value', Date.now())">Add Data</button>
<div id="chart"></div>

<script>
function updateChart() {
    // 清空图表
    document.getElementById("chart").innerHTML = "";

    // 遍历数据
    for (let i = 0; i < data.length; i++) {
        let chartItem = document.createElement("div");
        chartItem.className = "line-chart-item";
        chartItem.style.height = `${data[i].value * 10}px`; // 设置高度以显示值
        chartItem.style.top = `${(i / data.length) * 100}%`; // 根据位置调整高度
        chartItem.textContent = `${data[i].timestamp} - ${data[i].value}`;

        // 添加到DOM中
        document.getElementById("chart").appendChild(chartItem);
    }
}

// 初始化图表
updateChart();
</script>

结论

通过上述步骤，我们可以使用Axure的流程定义工具以及全局变量和循环动作来实现一个随固定时间间隔动态更新的折线图。这种方法可以灵活地适应各种业务场景，包括但不限于物联网监测、数据分析等领域。