Wijmo UI for the Web
表示色を設定
| Wijmo ユーザーガイド > ウィジェット > TreeMap > 主な機能 > 表示色を設定 |
wijtreemap ウィジェットでは、 maxColor、maxColorValue、 midColor、 midColorValue、 minColor および minColorValue オプションを使用して、各領域のそれぞれの表示色を設定できます。
次のスクリプトは、大陸ごとに異なる色を設定し、大陸内の各国は単一色の濃淡で色分けします。大陸内の各地域の値に従い、最大、中間、最小の色値の色が表示されます。たとえば、最も広い面積を持つ地域には最大色に対応する値を、最も面積の小さい地域には最小色に対応する値を割り当てます。
| スクリプト |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijtreemap"], function () { $(document).ready(function () { $("#treemap").wijtreemap({ showTooltip: true, maxColor: "#FF3300", minColor: "#FFFF66", midColor: "#99FF33", maxColorValue: 45000000, minColorValue: 950000, midColorValue: 4000000, data: [{ label: "Asia", value: 44579000, minColor: "#B2E0FF", maxColor: "#0099FF", midColor: "#66C2FF", items: [{ label: "Central Asia", value: 4003451 }, { label: "Eastern Asia", value: 11839074, items: [{ label: "China", value: 9596961 }, { label: "Japan", value: 377944 }, { label: "Others", value: 1864169 }] }, { label: "South-East Asia", value: 4500000 }, { label: "Western Asia", value: 6255160 }, { label: "Southern Asia", value: 17981315, items: [{ label: "India", value: 3287590 }, { label: "Others", value: 14693725 }] }] }, { label: "Africa", value: 30221532, minColor: "#FFFFC2", maxColor: "#CCCC52", midColor: "#FFFF75", items: [{ label: "Northern Africa", value: 8935659, items: [{ label: "Egypt", value: 1002450 }, { label: "Morocco", value: 33250000 }] }, { label: "Central Africa", value: 6612667 }, { label: "Western Africa", value: 5112903 }, { label: "Southern Africa", value: 1221037 }, { label: "Eastern Africa", value: 8339266 }] }, { label: "Americas", value: 42549000, minColor: " #C2FFC2", maxColor: " #52CC52", midColor: " #94FF94", items: [{ label: "South America", value: 17840000, items: [{ label: "Brazil", value: 8515767 }, { label: "Argentina", value: 2780400 }, { label: "Peru", value: 1285216 }, { label: "Colombia", value: 1141748 }, { label: "Others", value: 4116869 }] }, { label: "North America", value: 24709000, items: [{ label: "Canada", value: 9984670 }, { label: "United States", value: 9629091 }, { label: "Greenland", value: 2166086 }, { label: "Mexico", value: 1972550 }, { label: "Others", value: 956603 }] }] }, { label: "Europe", value: 10180000, minColor: "#FFCC99", maxColor: "#E68A2E", midColor: "#FFAD5C", items: [{ label: "Ukraine", value: 603628 }, { label: "Spain", value: 504645 }, { label: "France", value: 640679 }, { label: "Sweden", value: 449964 }, { label: "Others", value: 7981084 }] }, { label: "Oceania", value: 8525989, minColor: "#00FFFF", maxColor: "#4DFFFF", midColor: "#33FFFF", items: [{ label: "Australia", value: 7692024 }, { label: "NewZealand", value: 268021 }, { label: "others", value: 565944 }] }, { label: "Antartica", value: 14000000 }] }) }); }) </script> | |