# 染色區域折線圖

### 預覽圖

---

[![染色走勢圖.PNG](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/p9uJFBxjv4m3FUgc-%E6%9F%93%E8%89%B2%E8%B5%B0%E5%8B%A2%E5%9C%96.PNG)](https://book.gosu.bar/uploads/images/gallery/2019-12/p9uJFBxjv4m3FUgc-%E6%9F%93%E8%89%B2%E8%B5%B0%E5%8B%A2%E5%9C%96.PNG)

### 設定值

---

- #### 資料源

```
[
{year: 1884,change: -0.28,},
{year: 1885,change: -0.32,},
{year: 1886,change: -0.31,},
{year: 1887,change: -0.33,},
{year: 1888,change: -0.2,},
{year: 1889,change: -0.12,},
{year: 1890,change: -0.37,},
{year: 1891,change: -0.24,},
{year: 1892,change: -0.27,},
{year: 1893,change: -0.3,},
{year: 1894,change: -0.31,},
{year: 1895,change: -0.21,},
{year: 1896,change: -0.15,},
{year: 1897,change: -0.11,},
{year: 1898,change: -0.28,},
{year: 1899,change: -0.16,},
{year: 1900,change: -0.09,},
{year: 1901,change: -0.15,},
{year: 1902,change: -0.27,},
{year: 1903,change: -0.35,},
{year: 1904,change: -0.44,},
{year: 1905,change: -0.28,},
{year: 1906,change: -0.23,},
{year: 1907,change: -0.4,},
{year: 1908,change: -0.43,},
{year: 1909,change: -0.47,},
{year: 1910,change: -0.42,},
{year: 1911,change: -0.44,},
{year: 1912,change: -0.35,},
{year: 1913,change: -0.34,},
{year: 1914,change: -0.16,},
{year: 1915,change: -0.11,},
{year: 1916,change: -0.34,},
{year: 1917,change: -0.4,},
{year: 1918,change: -0.26,},
{year: 1919,change: -0.22,},
{year: 1920,change: -0.27,},
{year: 1921,change: -0.21,},
{year: 1922,change: -0.28,},
{year: 1923,change: -0.24,},
{year: 1924,change: -0.28,},
{year: 1925,change: -0.21,},
{year: 1926,change: -0.1,},
{year: 1927,change: -0.21,},
{year: 1928,change: -0.21,},
{year: 1929,change: -0.36,},
{year: 1930,change: -0.15,},
{year: 1931,change: -0.09,},
{year: 1932,change: -0.17,},
{year: 1933,change: -0.28,},
{year: 1934,change: -0.14,},
{year: 1935,change: -0.2,},
{year: 1936,change: -0.15,},
{year: 1937,change: -0.03,},
{year: 1938,change: -0.03,},
{year: 1939,change: -0.03,},
{year: 1940,change: 0.08,},
{year: 1941,change: 0.12,},
{year: 1942,change: 0.09,},
{year: 1943,change: 0.13,},
{year: 1944,change: 0.25,},
{year: 1945,change: 0.12,},
{year: 1946,change: -0.04,},
{year: 1947,change: -0.05,},
{year: 1948,change: -0.09,},
{year: 1949,change: -0.09,},
{year: 1950,change: -0.18,},
{year: 1951,change: -0.07,},
{year: 1952,change: 0.01,},
{year: 1953,change: 0.08,},
{year: 1954,change: -0.13,},
{year: 1955,change: -0.15,},
{year: 1956,change: -0.2,},
{year: 1957,change: 0.04,},
{year: 1958,change: 0.07,},
{year: 1959,change: 0.03,},
{year: 1960,change: -0.02,},
{year: 1961,change: 0.05,},
{year: 1962,change: 0.03,},
{year: 1963,change: 0.06,},
{year: 1964,change: -0.2,},
{year: 1965,change: -0.1,},
{year: 1966,change: -0.05,},
{year: 1967,change: -0.02,},
{year: 1968,change: -0.07,},
{year: 1969,change: 0.07,},
{year: 1970,change: 0.02,},
{year: 1971,change: -0.09,},
{year: 1972,change: 0.01,},
{year: 1973,change: 0.15,},
{year: 1974,change: -0.07,},
{year: 1975,change: -0.02,},
{year: 1976,change: -0.11,},
{year: 1977,change: 0.18,},
{year: 1978,change: 0.07,},
{year: 1979,change: 0.17,},
{year: 1980,change: 0.27,},
{year: 1981,change: 0.33,},
{year: 1982,change: 0.13,},
{year: 1983,change: 0.3,},
{year: 1984,change: 0.15,},
{year: 1985,change: 0.12,},
{year: 1986,change: 0.19,},
{year: 1987,change: 0.33,},
{year: 1988,change: 0.41,},
{year: 1989,change: 0.28,},
{year: 1990,change: 0.44,},
{year: 1991,change: 0.43,},
{year: 1992,change: 0.23,},
{year: 1993,change: 0.24,},
{year: 1994,change: 0.32,},
{year: 1995,change: 0.46,},
{year: 1996,change: 0.35,},
{year: 1997,change: 0.48,},
{year: 1998,change: 0.64,},
{year: 1999,change: 0.42,},
{year: 2000,change: 0.42,},
{year: 2001,change: 0.55,},
{year: 2002,change: 0.63,},
{year: 2003,change: 0.62,},
{year: 2004,change: 0.55,},
{year: 2005,change: 0.69,},
{year: 2006,change: 0.63,},
{year: 2007,change: 0.66,},
{year: 2008,change: 0.54,},
{year: 2009,change: 0.64,},
{year: 2010,change: 0.71,},
{year: 2011,change: 0.6,},
{year: 2012,change: 0.63,},
{year: 2013,change: 0.65,},
{year: 2014,change: 0.74,},
{year: 2015,change: 0.87,},
{year: 2016,change: 0.99,},
]
```

- #### 內距

```
40, 40, 60, 60
```

- #### <span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJoZWFkaW5nLTIlMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNSU5QyU5NiUyMEdlb20lMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU1RCU3RCU1RCU3RCU1RCU3RCU1RCU3RA==">圖 Geom</span>

##### <span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJoZWFkaW5nLTMlMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNyVCNyU5QSVFNSU5QyU5NiVFRiVCQyU4OCUyMExpbmUlMjAlRUYlQkMlODklMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU1RCU3RCU1RCU3RCU1RCU3RCU1RCU3RA==">線圖（line）</span>

<table border="1" id="bkmrk-%E5%88%97%E8%A1%A8-%E8%A8%AD%E5%AE%9A%E5%80%BC-%E6%AC%84%E4%BD%8D-year%2Avalue" style="border-collapse: collapse; width: 100%; height: 78px;"><tbody><tr style="height: 29px;"><td class="align-center" style="width: 50%; height: 29px;">列表</td><td class="align-center" style="width: 50%; height: 29px;">設定值</td></tr><tr style="height: 10px;"><td style="width: 50%; height: 10px;">欄位

</td><td style="width: 50%; height: 10px;">year\*change</td></tr><tr style="height: 10px;"><td style="width: 50%; height: 10px;">類型</td><td style="width: 50%; height: 10px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFOCVCNyVBRiVFNSVCRSU5MSVFNSU5QyU5NiUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">線圖</span></td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">形狀</td><td style="width: 50%; height: 29px;">smooth</td></tr></tbody></table>

##### <span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJoZWFkaW5nLTMlMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFNyVCNyU5QSVFNSU5QyU5NiVFRiVCQyU4OCUyMExpbmUlMjAlRUYlQkMlODklMjIlMkMlMjJtYXJrcyUyMiUzQSU1QiU1RCU3RCU1RCU3RCU1RCU3RCU1RCU3RA==">區域圖（area）</span>

<table border="1" id="bkmrk-%E5%88%97%E8%A1%A8-%E8%A8%AD%E5%AE%9A%E5%80%BC-%E6%AC%84%E4%BD%8D-year%2Avalue-0" style="border-collapse: collapse; width: 100%; height: 87px;"><tbody><tr style="height: 29px;"><td class="align-center" style="width: 50%; height: 29px;">列表</td><td class="align-center" style="width: 50%; height: 29px;">設定值</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">欄位</td><td style="width: 50%; height: 29px;">year\*change</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">類型</td><td style="width: 50%; height: 29px;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFOSVCQiU5RSVFNSU5QyU5NiUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">區域圖</span></td></tr><tr><td style="width: 50%;">顏色</td><td style="width: 50%;"><span data-slate-fragment="JTdCJTIyb2JqZWN0JTIyJTNBJTIyZG9jdW1lbnQlMjIlMkMlMjJkYXRhJTIyJTNBJTdCJTdEJTJDJTIybm9kZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJibG9jayUyMiUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlMkMlMjJpc1ZvaWQlMjIlM0FmYWxzZSUyQyUyMmRhdGElMjIlM0ElN0IlN0QlMkMlMjJub2RlcyUyMiUzQSU1QiU3QiUyMm9iamVjdCUyMiUzQSUyMnRleHQlMjIlMkMlMjJsZWF2ZXMlMjIlM0ElNUIlN0IlMjJvYmplY3QlMjIlM0ElMjJsZWFmJTIyJTJDJTIydGV4dCUyMiUzQSUyMiVFOSVCQiU5RSVFNSU5QyU5NiUyMiUyQyUyMm1hcmtzJTIyJTNBJTVCJTVEJTdEJTVEJTdEJTVEJTdEJTVEJTdE">\#ffffff</span></td></tr></tbody></table>

- #### 分段著色 RegionFilter

##### 分段著色- 漲 ( #FF4D4F )

<table border="1" id="bkmrk-%E5%88%97%E8%A1%A8-%E8%A8%AD%E5%AE%9A%E5%80%BC-%E7%B9%AA%E8%A3%BD%E5%9C%A8%E6%9C%80%E4%B8%8A%E5%B1%A4-%E9%96%8B%E5%95%9F-%E8%B5%B7%E5%A7%8B%E4%BD%8D" style="border-collapse: collapse; width: 100%;"><tbody><tr><td class="align-center" style="width: 50%;">列表</td><td class="align-center" style="width: 50%;">設定值</td></tr><tr><td style="width: 50%;">繪製在最上層</td><td style="width: 50%;">開啟</td></tr><tr><td style="width: 50%;">起始位置</td><td style="width: 50%;">min,max</td></tr><tr><td style="width: 50%;">結束位置</td><td style="width: 50%;">max,0</td></tr><tr><td style="width: 50%;">顏色</td><td style="width: 50%;"><div><div>\#FF4D4F</div></div></td></tr></tbody></table>

##### 分段著色- 跌 (#18a1cd)

<table border="1" id="bkmrk-%E5%88%97%E8%A1%A8-%E8%A8%AD%E5%AE%9A%E5%80%BC-%E7%B9%AA%E8%A3%BD%E5%9C%A8%E6%9C%80%E4%B8%8A%E5%B1%A4-%E9%96%8B%E5%95%9F-%E8%B5%B7%E5%A7%8B%E4%BD%8D-0" style="border-collapse: collapse; width: 100%; height: 145px;"><tbody><tr style="height: 29px;"><td class="align-center" style="width: 50%; height: 29px;">列表</td><td class="align-center" style="width: 50%; height: 29px;">設定值</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">繪製在最上層</td><td style="width: 50%; height: 29px;">開啟</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">起始位置</td><td style="width: 50%; height: 29px;">min,0</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">結束位置</td><td style="width: 50%; height: 29px;">max,min</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">顏色</td><td style="width: 50%; height: 29px;"><div><div>\#18a1cd</div></div></td></tr></tbody></table>