[{"id":"e6e5e5b2-b4b9-4881-a27d-2bfdc81aa499","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"04aef03c-34b0-443e-97d9-2c023f62f2f7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"b0373291-73c4-484f-92ec-33c463562da1","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"102ba5aa-cec9-4908-b8c3-3901776b3522","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"4c234b01-d631-46bc-8b5d-5a540e7c53ec","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"aa08370a-b78b-4ea4-bb05-703f0f2878f3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"8ccea2b2-8570-42db-ac8b-717a905f6e54","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"f984cabd-d486-431a-a705-806d8af6005a","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bf3d7736-d400-4b1f-961b-80bd79ebc341","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"4a7a8c81-be5b-48ec-9466-81597574ea3e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"4513c620-6d36-44a0-ac66-8ee36b732aaa","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"fa4af2f7-bdad-4421-8308-91ae5335cf08","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"dd3baca9-65b9-4fee-be78-936ac822e0a8","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"11521f93-e25b-475e-a6e9-99562affd250","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"c59a7960-067f-4cfe-962d-ca17e809374f","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"58160526-60b1-433c-856e-e594143b40e4","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5288c969-5c58-42b7-a771-f2ba59b26463","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"625c2be8-3178-4170-8bb6-fd5a29c9b12b","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2127bd41-6e09-4210-a7db-ffd75b440b0a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d3f2dd33-6d0c-434d-85b7-3a203b345432","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0ee2ae38-2dc5-4405-a053-4cec2d6da45e","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bfe2d033-add6-4535-8a1d-53dba531724c","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"22f011ea-7ff6-40b3-93b2-5ec6a08b3004","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1ccaa163-f60a-4765-b363-87ef525579bc","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"4af2b483-2b6f-4c34-8c19-8f095c30d255","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"771e3365-d820-4f61-a9d0-a4acfec34cfe","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"ceef41c2-b400-4f86-967c-ce6c37b23f8c","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"c11a7144-0181-44e5-a664-ceea080f1c00","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"ee159015-6403-4fc4-9a84-d7a91cf09eac","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"8af1c14c-3f45-49a5-8c31-dde8d1b56391","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"71f20047-65b6-4543-bbae-ed38e9faf4c2","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"ca526690-62d2-4fc6-b2c0-f43235d1ed19","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d09435aa-0ce0-4abf-8eac-098b1ad958de","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"c962c8b4-f5c4-4fac-b1ff-0ded14edd48c","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"17ba23cd-4700-45f5-90b3-4f73660ec0f6","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"fc766efd-d3b9-4a02-bd9e-5e99e57a559f","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"59568d5b-f57e-4532-892e-7801147cb365","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a425fcb7-001d-4292-a3b2-89fbdffb6549","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d4c37214-3df3-4272-8a22-8af2092baa97","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"85627c6c-5fcd-4c56-bcf4-a7b4057f6f8b","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"070764d4-4e6f-4188-9d4f-b03d3ad30ba6","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"c3a99c43-abdf-433e-a17f-cdd0622926d5","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"58813036-54d5-4f32-94de-f1ae21abefe9","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"f4526ebe-8606-4cb8-b113-f912a76c67ac","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"af1f2061-b720-4b7e-b47b-09210a29141a","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1fa64e59-b389-4ee1-ad79-21be1f9f805c","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"3d1dec1b-5e06-43e5-a0bd-3658361fd0b8","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1c8a3284-100b-45f8-9238-44b43d77a0c6","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e0d1c63c-09e2-4ca5-9446-60ff750211eb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e794c960-fd68-4921-957a-71ab23e0f6a6","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"36a63c60-d855-4b2b-b4a8-9b6367b164d8","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"3c617fb9-b939-4191-b28a-b2041d2a206f","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1b37ef69-148b-4260-ab7d-d2a1fe4f6557","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"30e35e25-23e8-414d-a3d0-dea09e48b19e","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0e7adc5e-cd98-4016-8efa-1b97b1ad9e47","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"66bcd656-cd13-49d2-bb94-2040fb137c30","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2165acbe-dd23-4eef-8d67-39611b84b991","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"68f5d6a6-0833-4e45-925d-4815bada92bb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7986911a-05e7-40ec-b297-7e36ea02c7ce","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9036ac60-c86c-4b6d-a49f-9700ed1d3892","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"eb8c0e3b-e094-4363-ad19-a8e077b6d1d2","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e7bbaa1c-0d4a-4ef9-85d3-b5febc9ae7d1","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6c52ca98-6398-4e03-aecb-d3e4608dd6dc","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9ff9add0-ac0f-4296-a824-fec798080686","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"73335050-0625-454a-8840-154623fe0979","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"73a512bc-d82e-46ed-91c3-2357e5eabc2d","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1d950265-fe36-424f-a70d-34a799107aed","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"06ef750d-6818-4a69-b3cf-3c66d14adbad","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"44d2507b-09de-488b-8aea-403f560b5120","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a4bc02eb-200c-43b8-8282-88bbbd2b16e7","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d1eb1a40-1355-4a5f-90a1-c3b71f0916ed","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"ac312db7-2cc7-4e86-ad5f-d32a9457bae1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a7d9fa04-27d5-44f3-93aa-ed7403bb35fe","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d3129303-6995-4ed3-9777-2d19e432f58c","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"ed450b6f-9500-49dc-b7ab-3a0dcdf6c510","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2409b15c-5e50-4a1d-8620-6bfef4fdb45a","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"31aa8b72-0458-4697-8c7f-86f017386df6","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5de2c1c0-92d5-45a5-b51b-a3f4739fe0f5","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"61865fda-94d8-4be0-9957-f771aa195b8a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"41874980-dc3a-4a8b-b697-f7e04fd1b823","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"92c0ba51-3305-409e-9cf4-204929cf35d7","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"920a1442-42ef-46d0-ad72-398dc864d5d0","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7fb32af8-f816-4d58-bd1d-47e574c8f5e9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"86060b44-1a7f-4908-acaa-4bfbc27108e3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"508172d5-04fd-43f4-b685-8c88d393b43a","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"ee1fac19-acc8-4784-94db-a058ef9c5133","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"aa5e65bf-0895-4f61-a1c6-acf74bd4972d","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"156b0030-955b-41bc-adca-4dc44170bbbb","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"b1d26b6f-2047-450e-bc0a-599316b960d5","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"195b2a5f-0e60-4eb0-bae8-5ed8d891e524","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d84a2eee-87e3-4dfe-98c8-5f462fd4ae7b","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d3573d2a-16c4-4401-9ecd-c1a223d3a62b","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"ace14693-034b-4a7a-81a7-e9ecf06b5864","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6d2d2cf-808b-4d52-9e74-fea3ff407e8f","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"f669c779-73b6-4eeb-a85b-07501b5508df","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6204bf7f-25ec-438d-b74a-1b2fdb4cbbf4","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"25bf6b1b-7a07-4688-be19-693fbd52f42c","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"959fa1f3-2635-43e4-8af0-a23f53cee3bb","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9b3254f9-0e22-4c28-8a61-e29818e632bb","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2ff430c9-be79-4c2a-909a-2df3968d6cc6","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9498336a-2b06-466f-a65d-47cc78cc4e76","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"ed166a4d-ae35-4f58-b6a5-669f6da27396","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1652764a-00ac-4057-84b2-a67db56f0482","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"24b01c24-a65c-4f15-911b-cdfa91689d7d","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"8b9c6943-d8c4-45f7-9747-444e78cb807f","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d79a49ee-b967-46ed-be56-57eaade710c6","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"c5ca387a-8d72-42da-9664-58f3a87be2b5","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"01c0bb16-3a77-4273-8807-642fdc0e0313","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"ea36f4c6-f62f-49bc-959a-b766c729ed47","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"3eaa2588-5f95-45a0-a3cd-55f96b144609","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"fadffc1f-a54b-4a55-aaaa-6b2d2ed2db3e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"63570f86-48ba-48b1-a574-727c33dc995d","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5fbce805-2e4d-4431-bfe0-a03f017ee276","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"25511142-2d98-4536-b03b-c8674990fc48","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"eaa789fb-8dcb-4631-92e4-cd05dbb551ad","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"663492e8-aa32-42ab-b4ba-4831346eed5f","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a831cde5-f03e-4487-970f-4b1af233fe53","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"014589e0-122f-4c75-8166-592dfdaa4f30","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bbba965f-ac1e-403a-8a9d-50a3c7dc40e1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"46f5c637-72a0-4909-8f58-cf2b691167fa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"660f9cc1-7a47-4c71-9cdc-dc465c531903","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"8467ddb0-1f74-4be5-8bad-e468757343e5","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"eac79187-f262-4404-a8a0-28ede7f1d949","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a691790d-8457-4579-a062-aee51ff37c50","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a364aa82-0533-49d7-b7ef-17b9956a7966","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"55b730c2-a6a1-43a4-b87a-ee4c9e2de902","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"19589c53-31cf-4fc7-97d7-fe5f8eff2287","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"dbd76b3f-3980-46bb-821c-14dd20e1259b","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1bbf1c90-ce88-47f9-967e-29e781c350d5","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"657a7c13-ef95-472a-bfa0-e2e067b6979a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"01c991af-7f24-4775-a9fd-1888c1e25730","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"cec84030-4354-4525-b2b9-24c82dad42b7","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2fcb0732-1a79-42b9-b88a-72da6cccdb43","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"60a1c2ef-4c5b-48d1-90f9-1a973e9dbea4","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"142a37ca-3ddd-49e5-acf3-1da7e8b7d055","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"c059b453-ca4e-4523-9ec9-515d543c1776","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5da20878-dde0-40a1-9e10-4db033e81133","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"c1c7c3be-f3f0-4f7c-8347-b7b3924f5c18","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"b19a1ee6-8c19-4052-a636-b2e8f9955fc3","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"f9e3d6fd-f886-4fa0-bb07-3645778ccb5b","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"8ecd9f13-af37-4e9b-a5cd-64591cfd3991","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
        
(Showing Draft Content)

書式文字列

ユーザーはセルに値と数式を同時に設定できます。また、セルの数式に基づいて、表示されるテキストに書式を設定できます。スタイルのフォーマッタに設定された書式文字列では、セルの表示値をカスタマイズする数式またはテキストテンプレートを指定できます。セル値はフォーマッタへのパラメータとして機能し、セル内で画像または更新したテキストとして描画されます。

スタイルのフォーマッタは、以下のように分かれています。

フォーマッタ

構文

標準のセル書式

標準のセル書式

"#,##0_);(#,##0)"

"h:mm AM/PM"

数式の書式文字列

標準の数式

"=SUM(@, C1)"

"=AVERAGE(C4:C7)"

テキストテンプレートの書式文字列

{{" "}}に数式が含まれるテキスト文字列

"After {{=@}} approval, Total Sales Were: {{=SUM(Sales4)}}"

“Hello, @”

@ 」記号は現在のセル参照を表し、数式またはテキストテンプレートで直接使用できます。

書式文字列での数式

セル値を設定すると共に、式をスタイルのフォーマッタに設定できます。「@」記号を使用して、現在のセルはを数式で参照できます。

たとえば、セル値はA1:A2のセル範囲の合計として設定できます。

style.formatter = '=SUM(@, A1:A2)';

書式文字列でのテキストテンプレート

テキストテンプレートは、ダッシュボードを作成するやデータを要約する場合に役立ちます。テキストテンプレートを使用すると、テキストと数式を1つのセルに結合し、{{" and "}}内で指定して数式を文字列にを折り返すことができます。

たとえば、セルには、日の値、SUM関数、静的テキストを結合して表示することができます。

style.formatter = "On {{=TEXT(TODAY(),"DDDD")}}, Total Sales Were: ${{=SUM(A1:A5)}}.";


書式文字列は、次のシナリオで使用できます。

  • 連結するより長い文字列を書式設定します。

  • 基になる値を変更せずに、異なる通貨または単位で値を表示します。

  • バーコードおよびスパークラインを使用して値または範囲をグラフィックスで描画します。

  • 「数値を単語に変換する」機能を使用して数値を単語として表示します。

  • ダッシュボードまたはレポートで値のKPI範囲テンプレートを表示します。

使用シナリオ

数値を単語に変更でき、その値はセルの値が変更されるたびに自動的に更新されます。

コードの使用

次のコードは、セル値に基づいて数値を単語として表示するためにカスタマイズされた関数を実装します。

// スプレッドシートを初期化します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// 数値を単語に変換します。
var sheet1 = spread.getSheet(0);
sheet1.name('Number to Words');
spread.addCustomName('n_1', '{"";" One";" Two";" Three";" Four";" Five";" Six";" Seven";" Eight";" Nine";" Ten";" Eleven";" Twelve";" Thirteen";" Fourteen";" Fifteen";" Sixteen";" Seventeen";" Eighteen";" Nineteen"}');
spread.addCustomName('n_2', '{"";0;" Twenty";" Thirty";" Forty";" Fifty";" Sixty";" Seventy";" Eighty";" Ninety"}');
spread.addCustomName('n_3', '{"";"-One";"-Two";"-Three";"-Four";"-Five";"-Six";"-Seven";"-Eight";"-Nine"}');
var numberToWordsStyle = new GC.Spread.Sheets.Style();
numberToWordsStyle.formatter = '=TRIM(REPT(INDEX(n_1,1+INT(@/10^8))&" hundred",10^8<@)&IF(@-TRUNC(@,-8)<2*10^7,INDEX(n_1,1+MID(TEXT(@,"000000000"),2,2)),INDEX(n_2,1+MID(TEXT(@,"000000000"),2,2)/10)&INDEX(n_3,1+RIGHT(INT(@/10^6))))&REPT(" million",10^6<@)&IF(--RIGHT(INT(@/10^5)),INDEX(n_1,1+RIGHT(INT(@/10^5)))&" hundred","")&IF(@-TRUNC(@,-5)<2*10^4,INDEX(n_1,1+MID(TEXT(@,"000000000"),5,2)),INDEX(n_2,1+MID(TEXT(@,"000000000"),5,2)/10)&INDEX(n_3,1+RIGHT(INT(@/10^3))))&IF(--MID(TEXT(@,"000000000"),4,3)," thousand","")&IF(--RIGHT(INT(@/100)),INDEX(n_1,1+RIGHT(INT(@/100)))&" hundred","")&IF(MOD(@,100)<20,INDEX(n_1,1+RIGHT(@,2)),INDEX(n_2,1+RIGHT(@,2)/10)&INDEX(n_3,1+RIGHT(@))))';
numberToWordsStyle.name = 'NumberToWords';
numberToWordsStyle.backColor = "lightblue";
spread.addNamedStyle(numberToWordsStyle);
sheet1.setColumnWidth(1, 700);
sheet1.setStyleName(1, 1, 'NumberToWords');
sheet1.getCell(1, 1).value(765348921).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet1.setColumnWidth(1, 700);

USD、CNY、JPY、およびEUROの通貨値をドロップダウン リストから選択することで、月次売上高をそれぞれの通貨で表示します。為替レートに基づいて、収益が毎月更新されます。また、為替レートが更新されるたびに、収益は動的に更新されます。


コードの使用

次のコードは、書式文字列を実装して、さまざまな通貨の為替レートに基づいて売上高を更新します。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
        sheetCount: 1
    });
    initSpread(spread);
};

function initSpread(spread) {
    var gcns = GC.Spread.Sheets;
    spread.suspendPaint();
    var sheet = spread.getActiveSheet();
    var data = [
        [, "FY 2019"],
        [, "Sales"],
        [, "Monthly", "Cumulative"],
        ["Apr", 188897, 188897],
        ["May", 208146, 397043],
        ["Jun", 226196, 623239],
        ["Jul", 277318, 900557],
        ["Aug", 263273, 1163830],
        ["Sep", 259845, 1423675],
        ["Oct", 241047, 1664722],
        ["Nov", 256306, 1921028],
        ["Dec", 195845, 2116873],
        ["Jan", 204934, 2321808],
        ["Feb", 257852, 2579660],
        ["Mar", 227779, 2807439]
    ];
    sheet.setArray(3, 1, data);
    sheet.setColumnWidth(2, 110);
    sheet.setColumnWidth(3, 110);
    sheet.setRowCount(20);
    sheet.setColumnCount(9);
    sheet.options.gridline.showHorizontalGridline = false;
    sheet.options.gridline.showVerticalGridline = false;
    sheet.getRange(3, 1, 15, 3).setBorder(
        new gcns.LineBorder("black", gcns.LineStyle.medium),
        { all: true });
    sheet.addSpan(3, 2, 1, 2);
    sheet.addSpan(4, 2, 1, 2);
    sheet.getRange(3, 2, 3, 2).backColor('#CFE1F3').hAlign(gcns.HorizontalAlign.center);
    sheet.getRange(6, 1, 12, 1).backColor('#CCC1DA');

    var cMapSource = [
        { "Currency": "USD", "Value": 1, "Symbol": "$" },
        { "Currency": "CNY", "Value": 7.02, "Symbol": "¥" },
        { "Currency": "JPY", "Value": 108.8, "Symbol": "¥" },
        { "Currency": "EURO", "Value": 0.91, "Symbol": "€" },
    ];
    sheet.tables.addFromDataSource('cT', 3, 5, cMapSource);
    [5, 6, 7].forEach((col) => { sheet.setColumnWidth(col, 80); });

    sheet.getCell(1, 2).value("Unit:").hAlign(gcns.HorizontalAlign.right);
    sheet.getRange(1, 3, 1, 1).backColor("yellow").setBorder(
        new gcns.LineBorder("blue", gcns.LineStyle.medium),
        { all: true });

    var dv1 = gcns.DataValidation.createFormulaListValidator('=cT[[#Data], [Currency]]');
    sheet.setDataValidator(1, 3, dv1);
    sheet.getCell(1, 3).hAlign(gcns.HorizontalAlign.center).value("USD");

    sheet.getRange(6, 2, 12, 2)
        .hAlign(gcns.HorizontalAlign.center)
        .formatter('=VLOOKUP($D$2,cT[#Data],3,FALSE)&"  "&TEXT(@*VLOOKUP($D$2,cT[#Data],2,FALSE),"###,###")');
    spread.resumePaint();

現在のKPIを示すためにゲージを表示します。カスタマイズされた関数は、スタイルのフォーマッタに設定されるKPIゲージを表します。radiusRatio、targetValue、label marginBottomなどのさまざまなパラメータを変更して、KPIゲージの動的な変化を確認できます。


コードの使用

次のコードは、セルの値に基づいてKPIゲージの値を更新するために書式文字列を実装します。

<script>
    var GuageKPIType = {
        circle: 0,
        verticalBar: 1,
        horizontalBar: 2
    };

    function getFontHeight(font) {
        var htmlSpan = document.createElement('span');
        htmlSpan.style.font = font;
        htmlSpan.innerHTML = 'H';
        var fontHeight = htmlSpan.offsetHeight;
        return fontHeight;
    }

    function GaugeKPISparkline() {
        GC.Spread.Sheets.Sparklines.SparklineEx.call(this);
        this.CIRCLE_CENTER_RADIUS = 6;
        this.TARGET_VALUE_INCREMENT = 3;
        this.CURRENT_VALUE_INCREMENT = 5;
        this.CURRENT_VALUE_LINE_WIDTH = 4;
        this.DASH_LINE_SOLID_LENGTH = 2;
        this.DASH_LINE_EMPTY_LENGTH = 4;
        this.TEXT_MARGIN = 10;
        this.PAINT_PADDING = 6;
    }
    GaugeKPISparkline.prototype = new GC.Spread.Sheets.Sparklines.SparklineEx();
    GaugeKPISparkline.prototype.createFunction = function () {
        var functionDescription = {
            description: 'この関数は、ゲージKPIスパークラインを表すために使用されるデータセットを返します。',
            parameters: [
                {
                    name: 'gaugeType'
                },
                {
                    name: 'targetValue'
                },
                {
                    name: 'targetValueFont'
                },
                {
                    name: 'currentValue'
                },
                {
                    name: 'currentValueFont'
                },
                {
                    name: 'minValue'
                },
                {
                    name: 'minValueFont'
                },
                {
                    name: 'maxValue'
                },
                {
                    name: 'maxValueFont'
                },
                {
                    name: 'minAngle'
                },
                {
                    name: 'maxAngle'
                },
                {
                    name: 'radiusRatio'
                },
                {
                    name: 'marginBottom'
                },
                {
                    name: 'colorRange'
                },
                {
                    name: '...'
                }
            ]
        };
        var func = new GC.Spread.CalcEngine.Functions.Function("GAUGEKPISPARKLINE", 5, 15, functionDescription);
        func.evaluate = function (args) {
            var retValue = {
                gaugeType: args[0],
                targetValue: args[1],
                targetValueFont: args[2],
                currentValue: args[3],
                currentValueFont: args[4],
                minValue: args[5],
                minValueFont: args[6],
                maxValue: args[7],
                maxValueFont: args[8],
                minAngle: args[9],
                maxAngle: args[10],
                radiusRatio: args[11],
                marginBottom: args[12]
            };
            var ranges = [], argsLength = args.length, tempArray;
            for (var index = 13; index < argsLength; index++) {
                var rangeValue = args[index];
                if (rangeValue instanceof GC.Spread.CalcEngine.CalcArray) {
                    tempArray = rangeValue.array[0];
                    ranges.push({
                        start: tempArray[0],
                        end: tempArray[1],
                        color: tempArray[2]
                    });
                }
            }
            retValue.ranges = ranges;
            return retValue;
        };
        func.acceptsArray = function (argIndex) {
            return argIndex >= 9 || argIndex >= 1 && argIndex <= 4;
        };
        return func;
    };
    GaugeKPISparkline.prototype.paint = function (ctx, value, x, y, width, height, options) {
        if (!value) {
            return;
        }
        if (value.gaugeType === GuageKPIType.circle) {
            ctx.save();
            ctx.rect(x, y, width, height);
            ctx.clip();
            this.paintCircle(ctx, value, x, y, width, height, options);
            ctx.restore();
        }
    };
    GaugeKPISparkline.prototype.getCircleData = function (ctx, value, x, y, width, height, options) {
        var zoomFactor = options.zoomFactor;
        var currentValueHeight = getFontHeight(value.currentValueFont) * zoomFactor,
            targetValueHeight = getFontHeight(value.targetValueFont) * zoomFactor;
        var PAINT_PADDING = this.PAINT_PADDING, TEXT_MARGIN = this.TEXT_MARGIN;
        var minAngle = value.minAngle, maxAngle = value.maxAngle;
        var minValueWidth = Math.ceil(ctx.measureText(value.minValue).width),
            maxValueWidth = Math.ceil(ctx.measureText(value.maxValue).width);
        var textWidth = Math.max(minValueWidth, maxValueWidth);
        var xOuterRadius = Math.floor(width / 2 - PAINT_PADDING - TEXT_MARGIN - textWidth);
        var graphHeight = Math.floor(height - PAINT_PADDING * 2 - TEXT_MARGIN * 2 - currentValueHeight - targetValueHeight),
            moreThanSemiCircle = Math.abs(minAngle) > 90 || Math.abs(maxAngle) > 90;
        var yOuterRadius = moreThanSemiCircle ? graphHeight / 2 : graphHeight;
        var outerRadius = Math.min(xOuterRadius, yOuterRadius);
        var retValue = {
            x: x + PAINT_PADDING + textWidth + TEXT_MARGIN + outerRadius,
            y: y + PAINT_PADDING + targetValueHeight + TEXT_MARGIN + outerRadius,
            outerRadius: outerRadius,
            innerRadius: outerRadius * value.radiusRatio
        };
        retValue.currentValuePoint = {
            x: retValue.x,
            y: moreThanSemiCircle ? (retValue.y + outerRadius + TEXT_MARGIN + currentValueHeight) : (retValue.y + TEXT_MARGIN + currentValueHeight)
        };
        return retValue;
    };
    GaugeKPISparkline.prototype.getPaintData = function (value) {
        var minRadian = (value.minAngle - 90) * Math.PI / 180, maxRadian = (value.maxAngle - 90) * Math.PI / 180;
        var minValue = value.minValue, maxValue = value.maxValue;
        var colorRanges = value.ranges, fillColor = 'lightgrey';
        var valuePerRadian = (maxRadian - minRadian) / (maxValue - minValue);
        var paintRanges = [];
        if (colorRanges.length > 0) {
            colorRanges.forEach(function (colorRange) {
                paintRanges.push({
                    start: valuePerRadian * (colorRange.start - minValue) + minRadian,
                    end: valuePerRadian * (colorRange.end - minValue) + minRadian,
                    color: colorRange.color
                });
            });
            paintRanges.unshift({ start: minRadian, end: paintRanges[0].start, color: fillColor });
            paintRanges.push({ start: paintRanges[paintRanges.length - 1].end, end: maxRadian, color: fillColor });
        } else {
            paintRanges.push({ start: minRadian, end: maxRadian, color: fillColor });
        }
        return {
            paintRanges: paintRanges,
            fillColor: fillColor,
            targetValueRadian: valuePerRadian * (value.targetValue - minValue) + minRadian,
            currentValueRadian: valuePerRadian * (value.currentValue - minValue) + minRadian,
            minValueRadian: minRadian,
            maxValueRadian: maxRadian
        };
    };
    GaugeKPISparkline.prototype.getPointOnCircle = function (x, y, radian, radius) {
        return {
            x: x + Math.cos(radian) * radius,
            y: y + Math.sin(radian) * radius
        };
    };
    GaugeKPISparkline.prototype.getCircleValuePaintInfo = function (circleCenterPoint, targetValuePoint, targetValueWidth) {
        var TEXT_MARGIN = this.TEXT_MARGIN;
        // 文字の高さを設定します。
        if (targetValuePoint.x > circleCenterPoint.x) {
            return { x: targetValuePoint.x + TEXT_MARGIN, y: targetValuePoint.y, textAlign: 'left' };
        }
        if (targetValuePoint.x < circleCenterPoint.x) {
            return { x: targetValuePoint.x - TEXT_MARGIN, y: targetValuePoint.y, textAlign: 'right' };
        }
        if (targetValuePoint.x === circleCenterPoint.x) {
            if (targetValuePoint.y > circleCenterPoint.y) {
                return { x: targetValuePoint.x, y: targetValuePoint.y + TEXT_MARGIN, textAlign: 'center' };
            }
            return { x: targetValuePoint.x, y: targetValuePoint.y - TEXT_MARGIN, textAlign: 'center' };
        }
        return { x: targetValuePoint.x, y: targetValuePoint.y, textAlign: 'left' };
    };
    GaugeKPISparkline.prototype.paintCircle = function (ctx, value, x, y, width, height, options) {
        var zoomFactor = options.zoomFactor;
        var circleData = this.getCircleData(ctx, value, x, y, width, height, options);
        var innerRadius = circleData.innerRadius, outerRadius = circleData.outerRadius;
        if (outerRadius <= 0) {
            return;
        }
        var currentValuePoint = circleData.currentValuePoint;
        var circleCenter = { x: circleData.x, y: circleData.y };
        var paintData = this.getPaintData(value),
            paintRanges = paintData.paintRanges, fillColor = paintData.fillColor;

        ctx.save();

        // <editor-folder desc="paint circles">
        paintRanges.forEach(function (paintRange) {
            // 外側の円を描きます。
            ctx.beginPath();
            ctx.moveTo(circleCenter.x, circleCenter.y);
            ctx.fillStyle = paintRange.color || fillColor;
            ctx.strokeStyle = 'white';
            ctx.arc(circleCenter.x, circleCenter.y, outerRadius, paintRange.start, paintRange.end, false);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();

            // 内側の円を描きます。
            ctx.beginPath();
            ctx.moveTo(circleCenter.x, circleCenter.y);
            ctx.fillStyle = 'white';
            ctx.strokeStyle = 'white';
            ctx.arc(circleCenter.x, circleCenter.y, innerRadius, paintRange.start, paintRange.end, false);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        });
        // </editor-folder>

        // <editor-folder desc="paint circle center">
        ctx.beginPath();
        ctx.moveTo(circleCenter.x, circleCenter.y);
        ctx.fillStyle = 'black';
        ctx.arc(circleCenter.x, circleCenter.y, this.CIRCLE_CENTER_RADIUS, 0, 2 * Math.PI, false);
        ctx.fill();
        // </editor-folder>

        // <editor-folder desc="paint line">
        // <editor-folder desc="paint target value line">
        var targetValueInnerPointOnCircle = this.getPointOnCircle(circleCenter.x, circleCenter.y, paintData.targetValueRadian, innerRadius);
        var targetValueOuterPointOnCircle = this.getPointOnCircle(circleCenter.x, circleCenter.y, paintData.targetValueRadian, outerRadius + this.TARGET_VALUE_INCREMENT);
        ctx.save();
        ctx.beginPath();
        ctx.setLineDash([this.DASH_LINE_SOLID_LENGTH, this.DASH_LINE_EMPTY_LENGTH]);
        ctx.moveTo(targetValueInnerPointOnCircle.x, targetValueInnerPointOnCircle.y);
        ctx.strokeStyle = 'grey';
        ctx.lineTo(targetValueOuterPointOnCircle.x, targetValueOuterPointOnCircle.y);
        ctx.stroke();
        ctx.restore();
        // </editor-folder>

        // <editor-folder desc="paint current value line">
        var currentValuePointOnCircle = this.getPointOnCircle(circleCenter.x, circleCenter.y, paintData.currentValueRadian, outerRadius + this.CURRENT_VALUE_INCREMENT);
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = this.CURRENT_VALUE_LINE_WIDTH;
        ctx.moveTo(circleCenter.x, circleCenter.y);
        ctx.lineTo(currentValuePointOnCircle.x, currentValuePointOnCircle.y);
        ctx.stroke();
        // </editor-folder>
        // </editor-folder>

        // <editor-folder desc="paint value">
        ctx.save();
        ctx.beginPath();
        ctx.textAlign = "start";
        ctx.fillStyle = 'grey';
        var minValueHeight = getFontHeight(value.minValueFont) * zoomFactor,
            maxValueHeight = getFontHeight(value.maxValueFont) * zoomFactor;
        var minMaxValueHeight = Math.floor(Math.max(minValueHeight, maxValueHeight));
        // <editor-folder desc="paint min value">
        var minValueFont = value.minValueFont || '10px Calibri';
        ctx.font = minValueFont;
        var minValue = value.minValue + '';
        var minValueWidth = ctx.measureText(minValue).width;
        var minValuePointOnCircle = this.getPointOnCircle(circleCenter.x, circleCenter.y, paintData.minValueRadian, outerRadius);
        var minValueInfo = this.getCircleValuePaintInfo(circleCenter, minValuePointOnCircle, minValueWidth);
        ctx.textAlign = minValueInfo.textAlign;
        ctx.fillText(minValue, minValueInfo.x, minValueInfo.y + minMaxValueHeight / 2);
        // </editor-folder>

        // <editor-folder desc="paint max value">
        var maxValueFont = value.maxValueFont || '30px Calibri';
        ctx.font = maxValueFont;
        var maxValue = value.maxValue + '';
        var maxValueWidth = ctx.measureText(maxValue).width;
        var maxValuePointOnCircle = this.getPointOnCircle(circleCenter.x, circleCenter.y, paintData.maxValueRadian, outerRadius);
        var maxValueInfo = this.getCircleValuePaintInfo(circleCenter, maxValuePointOnCircle, maxValueWidth);
        ctx.textAlign = maxValueInfo.textAlign;
        ctx.fillText(maxValue, maxValueInfo.x, maxValueInfo.y + minMaxValueHeight / 2);
        // </editor-folder>

        // <editor-folder desc="paint target value">
        var targetValueFont = value.targetValueFont || '16.667px Calibri';
        ctx.font = targetValueFont;
        var targetValue = value.targetValue + '';
        var targetValueWidth = ctx.measureText(targetValue).width;
        var targetValueInfo = this.getCircleValuePaintInfo(circleCenter, targetValueOuterPointOnCircle, targetValueWidth);
        ctx.textAlign = targetValueInfo.textAlign;
        ctx.fillText(targetValue, targetValueInfo.x, targetValueInfo.y);
        ctx.restore();
        // </editor-folder>

        // <editor-folder desc="paint current value">
        ctx.save();
        ctx.beginPath();
        var currentValueFont = value.currentValueFont || "25px Calibri";
        ctx.font = currentValueFont;
        var currentValue = value.currentValue + '';
        ctx.textAlign = "center";
        ctx.fillText(currentValue, currentValuePoint.x, currentValuePoint.y - value.marginBottom);
        ctx.restore();
        // </editor-folder>
        // </editor-folder>

        ctx.restore();
    };
    GaugeKPISparkline.prototype.paintHorizontalBar = function (ctx, value, x, y, width, height) {
        // ...
    };
    GaugeKPISparkline.prototype.paintVerticalBar = function (ctx, value, x, y, width, height) {
        // ...
    };
</script>
<script>
    $(document).ready(function () {
        // スプレッドシートを初期化します。
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
        // KPIゲージ
        var sheet1 = spread.getSheet(0);
        sheet1.name('KPI Gauge');
        spread.addSparklineEx(new GaugeKPISparkline());
        sheet1.suspendPaint();
        sheet1.setRowHeight(0, 300);
        sheet1.setColumnWidth(0, 300);
        sheet1.setColumnWidth(1, 300);
        sheet1.setColumnWidth(2, 300);
        sheet1.setRowCount(4);
        sheet1.setRowHeight(3, 300);
        sheet1.setColumnCount(3);
        sheet1.getCell(1, 0).text("radiusRatio").hAlign(2);
        sheet1.getCell(1, 1).text("targetValue").hAlign(2);
        sheet1.getCell(1, 2).text("label marginBottom").hAlign(2);
        var radiusRatioSliderStyle = new GC.Spread.Sheets.Style();
        radiusRatioSliderStyle.cellButtons = [{
            imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
            command: "openSlider",
            useButtonStyle: true,
        }];
        radiusRatioSliderStyle.dropDowns = [{
            type: GC.Spread.Sheets.DropDownType.slider,
            option: {
                marks: [0, 50, 100],
                step: 1,
                width: 190,
                direction: GC.Spread.Sheets.LayoutDirection.horizontal,
            }
        }];
        var targetValueSliderStyle = new GC.Spread.Sheets.Style();
        targetValueSliderStyle.cellButtons = [{
            imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
            command: "openSlider",
            useButtonStyle: true,
        }];
        targetValueSliderStyle.dropDowns = [{
            type: GC.Spread.Sheets.DropDownType.slider,
            option: {
                max: 40,
                marks: [0, 20, 40],
                step: 1,
                width: 190,
                direction: GC.Spread.Sheets.LayoutDirection.horizontal,
            }
        }];
        var marginBottomSliderStyle = new GC.Spread.Sheets.Style();
        marginBottomSliderStyle.cellButtons = [{
            imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
            command: "openSlider",
            useButtonStyle: true,
        }];
        marginBottomSliderStyle.dropDowns = [{
            type: GC.Spread.Sheets.DropDownType.slider,
            option: {
                max: 50,
                marks: [0, 25, 50],
                step: 1,
                width: 190,
                direction: GC.Spread.Sheets.LayoutDirection.horizontal,
            }
        }];
        sheet1.setStyle(2, 0, radiusRatioSliderStyle);
        sheet1.setValue(2, 0, 50);
        sheet1.setStyle(2, 1, targetValueSliderStyle);
        sheet1.setValue(2, 1, 20);
        sheet1.setStyle(2, 2, marginBottomSliderStyle);
        sheet1.setValue(2, 2, 50);
        var style1 = new GC.Spread.Sheets.Style();
        style1.formatter =
            '=GAUGEKPISPARKLINE(0, 125000, "bold 18px Calibri", @, "bold 35px Calibri", 0, "12px Calibri", 150000, "12px Calibri", -90, 90, =A3/100, 0, {0, 39848, "#e14d57"})';
        sheet1.setStyle(0, 0, style1);
        sheet1.setValue(0, 0, 39848);
        sheet1.getCell(3, 0).value(style1.formatter.substr(1, style1.formatter.length - 1)).wordWrap(true);
        var style2 = new GC.Spread.Sheets.Style();
        style2.formatter =
            '=GAUGEKPISPARKLINE(0, B3, "bold 18px Calibri", @, "bold 35px Calibri", 0, "12px Calibri", 40, "12px Calibri", -75, 75, 0.3, 10, {0, 32.2, "#71b37c"})';
        sheet1.setStyle(0, 1, style2);
        sheet1.setValue(0, 1, 32.2);
        sheet1.getCell(3, 1).value(style2.formatter.substr(1, style2.formatter.length - 1)).wordWrap(true);
        var style3 = new GC.Spread.Sheets.Style();
        style3.formatter =
            '=GAUGEKPISPARKLINE(0, 0, "bold 18px Calibri", @, "bold 35px Calibri", -50, "12px Calibri", 50, "12px Calibri", -135, 135, 0.3, C3, {-21, 0, "#5290e9"})';
        sheet1.setStyle(0, 2, style3);
        sheet1.setValue(0, 2, -21);
        sheet1.getCell(3, 2).value(style3.formatter.substr(1, style3.formatter.length - 1)).wordWrap(true);
        sheet1.resumePaint();
    });
</script>

**注意:**以下は、制限事項となります。

  • Excelでは書式文字列がサポートされていないので、Excel I/Oがサポートされていません。

  • 書式文字列はセルの状態をサポートしていません。