編輯導(dǎo)語：我們正在做原型圖時(shí)，特別在后臺(tái)原型中，經(jīng)常會(huì)涉及到統(tǒng)計(jì)圖的信息，很多同學(xué)可能會(huì)不知道怎么操作。作者為大家詳細(xì)介紹了如何繪制動(dòng)態(tài)柱狀統(tǒng)計(jì)圖，希望能夠應(yīng)用到你的工作中。

我們?cè)诠ぷ髦凶鲆恍┰蛨D時(shí)，尤其是后臺(tái)原型我們會(huì)經(jīng)常涉及到統(tǒng)計(jì)圖信息，上期我詳細(xì)為大家介紹了如何繪制動(dòng)態(tài)柱狀統(tǒng)計(jì)圖，這期我將為大家詳細(xì)的動(dòng)態(tài)折線統(tǒng)計(jì)圖。

首先我們先思考一下：

• 什么場(chǎng)景會(huì)使用到折現(xiàn)統(tǒng)計(jì)圖呢？
• 相比于柱狀統(tǒng)計(jì)圖和扇形統(tǒng)計(jì)圖我們繪制折線統(tǒng)計(jì)圖的優(yōu)點(diǎn)在哪呢？
• 如何快速設(shè)計(jì)一款美觀的折線統(tǒng)計(jì)圖以應(yīng)用我們的工作中呢？

一、使用場(chǎng)景

折線圖可以顯示隨時(shí)間（根據(jù)常用比例設(shè)置）而變化的連續(xù)數(shù)據(jù)，因此非常適用于顯示在相等時(shí)間間隔下數(shù)據(jù)的趨勢(shì)。

在折線圖中，類別數(shù)據(jù)沿水平軸均勻分布，所有值數(shù)據(jù)沿垂直軸均勻分布。如果分類標(biāo)簽是文本并且代表均勻分布的數(shù)值（如月、季度或財(cái)政年度），則應(yīng)該使用折線圖。同時(shí)，單條線的數(shù)據(jù)點(diǎn)要大于2個(gè)，但是同一個(gè)圖上建議不要超過5條折線。

二、優(yōu)點(diǎn)分析

折線統(tǒng)計(jì)圖用折線的起伏表示數(shù)據(jù)的增減變化情況。不僅可以表示數(shù)量的多少，而且可以反映數(shù)據(jù)的增減變化情況。比如可以用來作股市的跌漲和統(tǒng)計(jì)氣溫或其他表示趨勢(shì)的資料。

表示現(xiàn)象間的對(duì)比關(guān)系；揭露總體結(jié)構(gòu)；檢查計(jì)劃的執(zhí)行情況；揭示現(xiàn)象間的依存關(guān)系，反映總體單位的分配情況；說明現(xiàn)象在空間上的分布情況。一般采用直角坐標(biāo)系．橫坐標(biāo)用來表示事物的組別或自變量x，縱坐標(biāo)常用來表示事物出現(xiàn)的次數(shù)或因變量y；或采用角度坐標(biāo)（如圓形圖）、地理坐標(biāo)（如地形圖）等。

三、設(shè)計(jì)原型

本期我將以常見的商品銷售額作為案例進(jìn)行繪制原型。

演示預(yù)覽：https://rxoiz4.axshare.com

首先我們先把基礎(chǔ)的橫縱坐標(biāo)畫出來，橫坐標(biāo)我以“年份”作為單位，縱坐標(biāo)我以“金額”作為單位，繪制出基礎(chǔ)的橫縱線，注意橫縱之間的距離保持等距。

接著我們選擇插入工具，選擇鋼筆工具，進(jìn)行繪制弧度圖案，并對(duì)圖案線段設(shè)置顏色。

將繪制的圖案轉(zhuǎn)換成動(dòng)態(tài)面板，并將動(dòng)態(tài)面板寬度設(shè)置為1，高度保持不變。

設(shè)置完動(dòng)態(tài)面板后，對(duì)動(dòng)態(tài)面板進(jìn)行交互設(shè)置，交互樣式設(shè)置為：載入時(shí)-設(shè)置尺寸-當(dāng)前目標(biāo)，設(shè)置設(shè)置寬度為需要的長(zhǎng)度，高度保持不變，動(dòng)畫選擇 線性? 600毫秒。

接著想要使原型更美觀一些，可以在統(tǒng)計(jì)圖上面對(duì)不同的年份增加“數(shù)量點(diǎn)”這樣可以使統(tǒng)計(jì)圖看的更直觀明了。

這樣我們的動(dòng)態(tài)折線統(tǒng)計(jì)圖就完成了，下期將為大家介紹如何詳細(xì)繪制動(dòng)態(tài)扇形統(tǒng)計(jì)圖。

希望文章可以幫助到您，接下來的時(shí)間我們一起互相學(xué)習(xí)一起進(jìn)步~

本文由 @畫圖仔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Pexels，基于CC0協(xié)議。