├── @colors.txt ├── README.md ├── app.R ├── preview.png └── www ├── gaba.png └── pmgh.ico /@colors.txt: -------------------------------------------------------------------------------- 1 | #000000,#A6A3A4,#2C939A 2 | #9ACE87,#EE634B,#D2D2D2 3 | #EAE1EF,#C2DCE9,#C2DACF,#F8F3EB 4 | #DAC6CF,#85C3DC,#E2C098,#8DAFAB 5 | #B22222,#000080 6 | #F5A889,#ACD6EC 7 | #148F28,#EA71AE 8 | #FF0000,#38C1F3,#8048AA 9 | #FBCE6A,#5CA7C7,#383838,#D4352D 10 | #B02226,#009E73,#F0A12C 11 | #9C6BA3,#FE9C9D,#98C897,#9DBAD2 12 | #D7F0D0,#D6E6F2,#FAC4CC,#D3D2D2 13 | #F4F9F2,#EAF3FC,#FFE7E7,#F4F4F4 14 | #E07F86,#8FA2CD,#F8BC7E,#CC976B 15 | #5EA0C7,#B4D7E5,#6BC179,#BEDEAB 16 | #71BFB2,#FEE066,#237B9F,#AD0B08,#EC817E 17 | #91CAE8,#F48892 18 | #A9CA70,#C5D6F0,#F18C54 19 | #0E986F,#796CAD,#D65813 20 | #377EB9,#4DAE48,#974F9F 21 | #b8dbb3,#72b063,#719aac,#e29135,#94c6cd,#4a4f7e 22 | #a5aeb7,#925eb0,#7399f4,#cc7c71,#7ab656 23 | #8d2f25,#4e1945,#cb9475,#8cbf87,#3e608d,#909291 24 | #b7b7eb,#9d9ea3,#eab883,#9bbbe1,#f09ba0 25 | #dddddd,#e6b745,#d0dd97 26 | #dca7eb,#a0d0d0,#eae936,#b7f5de,#d5aabe,#a7c0df 27 | #a51c36,#7abbdb,#84ba42,#682487,#dbb428,#d4562e,#4485c7 28 | #6f6f6f,#547bb4,#c0321a,#629c35,#dd7c4f,#6c61af 29 | #8074C8,#7895C1,#A8CBDF,#D6EFF4,#F2FAFC,#992224,#B54764,#E3625D,#EF8B67,#F0C284,#F5EBAE,#F7FBC9 30 | #3E4F94,#3E90BF,#A6C0E3,#D8D3E7,#FAF9CB 31 | #BFDFD2,#257D8B,#68BED9,#EFCE87,#EAA558,#ED8D5A 32 | #979998,#C69287,#E79A90,#EFBC91,#E4CD87,#FAE5B8,#DDDDDF 33 | #E4A031,#D68438,#C76B60,#B55384,#7C4D77,#474769,#26445E,#4C7780,#73A5A2,#F6E2C1,#F3DBC1,#B2B6C1,#D6E2E2,#F0EFED 34 | #D8B365,#5BB5AC,#DE526C 35 | #D8B365,#5BB5AC,#DE526C 36 | #B02425,#FAA419,#4583B6,#4DB748,#218D42,#156434 37 | #B02425,#FAA419,#4583B6,#4DB748,#1F8E42,#156434 38 | #807C7D,#C1565E,#DCA96A,#82AD7F,#7EA4D1,#79438E 39 | #7EA6D9,#D4E6BC,#F8F2A4 40 | #A04646,#CFC580,#75AAB8,#DCCB59,#2900F2,#AE3019,#B58C9A,#8985B7,#E8DF92,#A3C98E,#B3C4D4 41 | #FDEBAA,#EDC3A5,#DBE4FB,#ABD1BC,#E3BBED,#cCcc99,#BED0F9,#FCB6A5,#F1F1F1 42 | #F0EEEF,#C6CCbc,#9DACCB,#7789B7,#CBD7C3,#ACBF9F,#89AA7B,#D6D6D6,#EB6969 43 | #91ccc0,#7FABD1,#F7AC53,#EC6E66,#B5CE4E,#BD7795,#7C7979,#963B79,#97D0C5,#F39865,#52AADC,#C7C1DE,#EEB6D4,#C89736,#2D8875,#D75B4E 44 | #18BECF,#BCBD23,#7F7F7F,#004600,#78B428,#C8E63C,#FFE494 45 | #000000,#4B57A2,#D3D3D3,#098036,#FCDFC0,#F9BE80,#EE7D80 46 | #32183C,#A21A54,#E7724F,#000000,#36659E,#40B7AD 47 | #FFC04D,#606060,#82093B,#34183E,#4D779B,#C45C69,#CD3B42,#585D5E 48 | #2B5863,#6A8078,#9D9D9D 49 | #08306B,#08519C,#2171B5,#6BAED6,#C6DBEF,#FED976,#FFFFCC,#969696,#D95319,#EDB120,#0072BD,#77AC30 50 | #F27873,#FFD373,#008A45,#80C5A2,#5F5F5E,#468BCA,#7DD2F6,#B384BA,#D9C2DD 51 | #B6B3D6,#DAD7E9,#CFCFD0,#FDE2D8,#F58F7A,#E9687A 52 | #1F77B4,#DAA628,#47A1A2,#282973,#708090,#F9BFCB 53 | #DB7272,#C6A550,#A1D4A2,#3C518F,#38917E,#A47DC0,#989ED9,#4D0085 54 | #DEAA87,#E9DDAF,#93AC93,#6F8A91 55 | #A02C2c,#666666,#E5DEDE,#CCBCBC,#9BADB2,#FFB889,#808080,#cccccc,#F4E3D7 56 | #EECA40,#FD763F,#23BAC5 57 | #DCE125,#5086C4,#B55489,#4C6C43,#F0A19A,#7C7CBA,#00A664,#F9ED1D,#3FA0C0,#D5D9E5,#D6E0C8,#D6E0C8,#FEDEC5,#FFF0BC,#C7B8BD,#D5D9E5 58 | #F7A6AC,#F7B7D2,#EEC186,#EEF0A7,#B2DBB9,#B8E5FA 59 | #666666,#E5AB02,#66A61E,#A5761C,#cccccc,#B2DF8A,#349F2B 60 | #5861AC,#FFE0C1,#FFC080,#FEA040,#FF7F00,#FF6100,#F28080,#6B7EB9,#A5C2E2,#6AB4C1,#72C3A3,#70B48F 61 | #F39DA0,#95BCE5,#E84445,#1999B2 62 | #00A14E,#ECE70F,#688CC8 63 | #CAC8EF,#9BDCFC,#C9EFBE,#F0CFEA 64 | #E69C81,#E6BA9D,#E7CEA5,#D7DCBE,#D9DDBA,#63BA45,#00ADEF 65 | #91BFFA,#F2F2F2,#FFFEDF 66 | #D1B494,#E0C79F,#F1DEBD,#FFFBD5,#D9EEDF,#C0E2CA,#9DD3AF 67 | #2C6344,#5F9C61,#A4C97c,#61496D,#B092B6,#CAC1D4,#C74D26,#E38D26,#F1CC74,#308192,#5EA7B8,#AED2E2 68 | #949B93,#92B9BE,#A9D3AD,#F5DF4D,#CDE3A5,#F6F8F7,#E7F5F6,#F4F7FE 69 | #F9E7A7,#EF767B,#43A3EF 70 | #F2A1A7,#7DC69B,#9BD7F3,#FBDDDD,#FCE6CF,#D5EAD9,#D8EEFB,#DCD7EB 71 | #A09FA4,#FEA0A0,#AD07E3,#55A0FB,#099A63,#91BFFA 72 | #93C8c0,#1C3C63,#D3D5D4 73 | #3AB5B3,#954F97,#B3D5F1,#F0686C,#5567B1,#80C66D 74 | #8370FE,#A020EF,#0000FE,#01008A,#1E90FF,#00688B,#698B6A,#228B22,#566B30,#FF7F00,#FFB90F,#FE0000,#8B8378,#8B864E 75 | #858786,#ED2225,#E97123,#E1B224,#E7C21C,#CAC658,#87BBAF,#5CA9BB,#389AB3 76 | #205EA7,#3BB6C5,#965478,#EAF0B2,#C8E2B2,#7ECBB9,#38B6C4,#1D91C2,#205EA7 77 | #DDE554,#F8AF62,#E00200,#DFE662,#88CF73,#39B086,#008E8A,#176A7A,#2E4857 78 | #FFF1CF,#F07673,#7998AD 79 | #FC757B,#F88455,#FDCA93,#FFE59B,#76CBB4,#3C9Bc9 80 | #5BA9BD,#95BE54,#DBCC57,#E0BB6D,#B0783D,#D5A6A0,#9D6067,#A93935,#DCDE8B 81 | #6897CF,#669A38,#F58C86,#F6D586,#F3ED99,#EDEDEF 82 | #000000,#0071BD,#C2272b,#FFF2D8,#DAE9E4 83 | #262A85,#C65537,#F1EBED,#EDF4FA,#ACCBE8,#DDA43D,#519475,#5D2B84,#EDDB31,#4C9140,#6A4C30,#5B99E6,#BE3731,#000000 84 | #AED6D5,#7A9590,#B86078,#97A9B7,#4C4D4F 85 | #000000,#4F8B57,#D8A266,#7347BA,#5291B2,#91CC7A,#467D80,#283D7E 86 | #DB9C4D,#96A4C7,#8C4E29,#508D40,#A9B233,#D38386,#DDA5C8,#B7C6E5,#65A8EC 87 | #6E8E9D,#581036,#F3EAE1,#A65655,#777777,#B98E95,#97A4AA 88 | #3B5BA8,#759D3A,#AC4828,#73ABE4,#CFA72D,#751A29 89 | #E9B9E1,#BDD69F,#939DE4,#EBC98A,#A2C6D6,#D9503D,#DEA441,#6C85F9 90 | #CD5257,#F2BA2F,#2673EF,#E8E8E8,#FAEADF 91 | #611A44,#A75265,#858A2E,#CBC46A,#291173,#356529,#629586,#95BEEC,#D5D5D5,#832F87 92 | #A3A3A3,#71AD48,#4770B5,#ED7D31,#FBBE0A,#45546A 93 | #9CAD8B,#DFE8D5,#7B1415,#EBCEc0,#4626F6,#8479F9,#D3D0FD,#ECD2D3,#DB8382,#CE403F,#CB181C,#6C0E0F 94 | #6AD1A3,#88B6F1,#FFDE7B,#FF988B,#989898,#84ADDC 95 | #4F7D78,#CC141E,#FFECC2,#FFD153,#D2D699 96 | #40B0A6,#E1BE6A,#A38E89,#E1BE6A,#CD5582,#6E579A,#6D8EF7,#EC6B2D,#A5C8DD,#E89A7A 97 | #484848,#666666,#999999,#CCcccc,#BEA4BD,#FAC5C6,#A0B3DC,#FCDFC7,#99D1D0,#CF66A5,#9F6BBF 98 | #ADDEAD,#DDAF70,#8BABD3,#DE767C,#A58BD4,#D7B0B0 99 | #377EB8,#E41A1C,#D2EBD2,#FFF0B1,#BFBFBF,#E1F3FA 100 | #CA645F,#95A938,#7488C5,#67AFD5,#6295D7,#6AB3A2,#AD3688 101 | #D0BEB0,#D7D1C5,#B6D3CF,#A1C6E0,#87A4EA,#898CF3,#9881F3 102 | #8583A9,#CA8BA8,#A0BDD5 103 | #E98D83,#FFCBAA,#FFFBED,#D3D3D3,#95B6EC 104 | #F3A59A,#A6DDEA,#80D0C3,#9EAAC4,#F9CDBF 105 | #016450,#237B7A,#4592A5,#67A9CF,#8AB6D7,#ADC4DE,#D0D1E6,#D0DAEB,#9FAAD1,#7D4C99 106 | #F9A31A,#CE6090,#0000FF,#79C5CE,#EEF4FB,#B9DBF4,#5E8FC5,#F15A22 107 | #FFDC8E,#C2C48D,#85D0FF 108 | #F7BDA9,#FBDED4,#E0EBEB 109 | #FF8901,#93B190,#B9BB8E,#DFDEE1,#E4CAD1,#B6E2FB,#D1D1D1,#858585,#E1E3FF,#FCCFE7,#DB6A5D 110 | #5C6572,#36A9E1,#EB5B25,#ADB2B9,#C2E5F6,#F5AD92 111 | #FF8080,#FFBB80,#BF91D5,#80A3D5,#AA8873,#D4C140 112 | #478AC1,#98C9D5,#8A9B6D,#E4B78A,#C198B3,#FFEEC0 113 | #81B8DA,#EFC57F,#000000 114 | #BDB9B8,#DFEBD5 115 | #BEBAB9,#C47070 116 | #629433,#FEFF99 117 | #BFBBBA,#CFDAEC 118 | #050507,#1399B2 119 | #BEBAB9,#DBB8B2 120 | #8E7FB8,#A2C9AE 121 | #6888F5,#D77071 122 | #C30078,#4370B4,#549F9A 123 | #F9E7A7,#EF767B,#43A3EF 124 | #2472A3,#A5B55D,#F4F3EE 125 | #EECA40,#FD763F,#23BAC5 126 | #ACD2C7,#D57B70,#94B5D8 127 | #93C8c0,#1C3C63,#D3D5D4 128 | #FFF1CF,#F07673,#7998AD 129 | #A5CCC7,#97A9B7,#4C4D4F 130 | #F5F6BA,#688660,#9A5747 131 | #7EA6D9,#D4E6BC,#F8F2A4 132 | #FF5E00,#5CB3BA,#F3D707 133 | #8583A9,#CA8BA8,#A0BDD5 134 | #2B5863,#6A8078,#9D9D9D 135 | #81B8DA,#EFC57F,#000000 136 | #FFDC8E,#C2C48D,#85D0FF 137 | #EAEAEA,#91BFFA,#FF7F00,#FFE0C1 138 | #074166,#8CC5BE,#CC011F,#FADADD 139 | #6A8EC9,#E84446,#59B78F,#7A378A 140 | #A0ADD0,#E47178,#F5DC75,#75C298 141 | #A0ADD0,#E47178,#F5DC75,#75C298 142 | #D693BE,#8EC8ED,#F5B3A5,#AED594 143 | #0B0B09,#223474,#9CC7F1,#EED26E 144 | #1CC3c9,#70A0AA,#8194A0,#89909E 145 | #3D89A3,#838482,#5EC7D0,#F1D756 146 | #ED342F,#F69A9B,#2356A7,#83B6E1,#178642,#A0D293 147 | #95A8D2,#C3EAB5,#C5767B,#870A4C,#000084 148 | #6F5b9B,#AEA3CD,#0A87D7,#B5711E,#81AA2A 149 | #9DA190,#A6BA89,#C2D794,#D0FFB1,#8DAD95,#EBA782,#C4A880,#DAD184 150 | #9970AC,#5AAE61,#A5761C,#6BAFD6,#878787,#1D71B9,#CBBBA1,#000000 151 | #C8C2E4,#BABABC,#E0B77F,#9BBBE1,#F09BA0 152 | #000000,#878787,#DAC1A2,#345684,#C3752B,#A21549 153 | #A56B45,#CDBB71,#9E5648,#BD8A99,#6A8864,#B7C685,#4E606E,#B5BCC2 154 | #A56B45,#CDBB71,#9E5648,#BD8A99,#6A8864,#B7C685,#4E606E,#B5BCC2 155 | #75A6DE,#B3D250,#DEBB5D,#C8795A,#75AD8A,#B0CBE6,#D0813C,#D4C649,#A4C962,#7EB1A0,#596AAF 156 | #496648,#AC151C,#8D8988,#D2878C,#F5F291,#9DBF83 157 | #AD4641,#75B0B4,#806CAB,#DED0A1,#B4C4E5,#D19692,#AFC9A6,#869C76,#AFAFAD 158 | #828387,#91C6F2,#391A53,#8F1B26,#974F91,#3B4293 159 | #00BBF9,#2A788E,#22A884,#7AD151,#EB1C4A,#4AAC44,#1E90FF,#FF8C00,#22A884 160 | #A49193,#EDE7D9,#D3DCE3,#B5C9BE,#F3E3E3,#DECCA6,#E0DEDF,#78828B,#D6E3D2,#C89D94,#EFE1D6,#654E5E 161 | #B2B0D7,#694F98,#3D5DA8,#D6E1F5,#C2DCAF,#ECDE93,#DBA43F,#CE7A5E,#B90978 162 | #DE061E,#2481C4,#8A8A88,#C7C7C5,#C4C2DA,#F7D8D6 163 | #FFFFB2,#FD8D3C,#BD0026,#074C9B,#4292C6 164 | #BF1D2D,#262626,#293890 165 | #F1B656,#397FC7,#040676 166 | #6F6F6F,#F6631C,#6D65A3 167 | #FF9A9B,#9998FF,#C99BFF 168 | #2C91E0,#3ABF99,#F0A73A 169 | #DE582B,#1868B2,#018A67,#F3A332 170 | #069DFF,#808080,#A4E048,#010101 171 | #BABABA,#0001A1,#037F77,#C5272D 172 | #32037D,#7C1A97,#C94E65,#D9995B 173 | #015493,#019092,#999999,#F4A99B 174 | #909090,#0095FF,#019092,#6FDCB5 175 | #2F2D54,#9193B4,#BD9AAD,#E8D2B3 176 | #D6D6D6,#9CB0C3,#7C9D97,#EAB080 177 | #4FBD81,#ADE0B4,#5DBFE9,#E7E6D4 178 | #808080,#F94141,#F3B169,#589FF3,#37AB78 179 | #60966D,#5B3660,#FFC839,#E90F44,#63ADEE 180 | #ABC6E4,#C39398,#FCDABA,#A7D2BA,#D0CADE 181 | #C72228,#F98F34,#0C4E9B,#F5867F,#FFBC80,#6B98C4 182 | #3B549D,#D3272B,#6BBC46,#9EAAD1,#F29091,#B4DEA2 183 | #23B2E0,#000000,#EF2C2B,#C2C2C2,#A5CC5B,#EEBEC0 184 | #000000,#5CA400,#8BCF02,#338FEB,#E7308B,#B31761 185 | #C55645,#354898,#T3ABCF,#972D36,#FAAE5F,#6B6B6B 186 | #27447C,#4871B3,#E73C36,#991F22,#B88640,#168676 187 | #3E6790,#6483A4,#646774,#858892,#AF873E,#BD9E64 188 | #91CDC8,#6FB9D0,#5499BD,#3981AF,#386195,#324C63 189 | #FBB463,#80B1D3,#F47F72,#BDBADB,#FBF8B4,#8DD1C6 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 学术期刊配色推荐器 2 | 3 | 用R语言shiny包写了一个小程序，便于学术论文绘图时，离散配色方案的选择和参考，该程序已部署至云端，欢迎访问：科研绘图配色推荐器 4 | 5 | 我的服务器性能太差了，经常跑满内存储存，所以设定了每4个小时（即北京时间0、4、8、12、16、20点）重启服务器，如云端app无法访问，请下载至本地运行，或等待服务器在临近时点重启后访问，感谢理解😀。 6 | 7 | 程序中包含的配色方案（保存于@colors.txt），收集自以下文章，在此表示感谢： 8 | 9 | 1. [跟着顶刊学科研绘图——science配色篇（一）](https://zhuanlan.zhihu.com/p/679737536) 10 | 11 | 2. [跟着顶刊学科研绘图——nature配色篇（一）](https://zhuanlan.zhihu.com/p/679425898) 12 | 3. [跟着顶刊学科研绘图——nature配色篇（二）](https://zhuanlan.zhihu.com/p/679572970) 13 | 4. [跟着顶刊学科研绘图——nature配色篇（三）](https://zhuanlan.zhihu.com/p/680011321) 14 | 5. [分享 | 顶刊高质量论文插图配色（含RGB值及16进制HEX码）（第一期）](https://zhuanlan.zhihu.com/p/670396774) 15 | 6. [分享 | 顶刊高质量论文插图配色（含RGB值及16进制HEX码）（第二期）](https://zhuanlan.zhihu.com/p/674906660) 16 | 7. [分享 | 顶刊高质量论文插图配色（含RGB值及16进制HEX码）（第三期）](https://zhuanlan.zhihu.com/p/689959306) 17 | 8. [论文配色：跟着顶刊学配色（Nature篇）](https://zhuanlan.zhihu.com/p/704390338) 18 | 19 | 20 | 21 | shinyapp预览： 22 | 23 | ![shiny_app_preview](https://raw.githubusercontent.com/lcpmgh/colors/master/preview.png) 24 | 25 | 26 | 27 | ## 更新日志： 28 | 29 | 2024-10-08 v2.0 30 | 31 | 1. 颜色数据库：删除重复值、无效值（获取色值时ocr识别错误） 32 | 2. 数据库详情表中添加一列预览颜色，更直观，但展示出来更耗时 33 | 3. 删除随机显示，更改为，筛选颜色数量后，点击上下项或点击数据库展示绘图效果 34 | 4. 20250128，添加颜色透明度调节项 35 | 36 | 2024-04-05 v1.0 37 | 38 | 1. 创建程序 39 | -------------------------------------------------------------------------------- /app.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(purrr) 3 | library(scales) 4 | library(ggplot2) 5 | library(stringr) 6 | library(magrittr) 7 | library(reactable) 8 | library(gridExtra) 9 | library(htmltools) 10 | library(data.table) 11 | library(shinyWidgets) 12 | library(colourpicker) 13 | library(shinydashboard) 14 | 15 | ui <- dashboardPage( 16 | dashboardHeader(title = "科研绘图配色推荐器",titleWidth = "100%"), 17 | dashboardSidebar(disable = TRUE, collapsed = TRUE), 18 | dashboardBody( 19 | uiOutput("uipanel"), 20 | tags$hr(), 21 | tags$div(align = "center", 22 | tags$p("\ua9 2021-2024, Lcpmgh, All rights reserved.", style="height:8px"), 23 | tags$div(align = "center", 24 | actionLink(inputId = "", label = "lcpmgh ", icon = icon("github"), onclick ="window.open('https://github.com/lcpmgh')"), 25 | tags$p(" ", style = "display:inline;white-space:pre"), 26 | actionLink(inputId = "", label = "lcpmgh@gmail.com", icon = icon("envelope"), onclick ="window.location.href='mailto:lcpmgh@gmail.com'"), 27 | tags$p(" ", style = "display:inline;white-space:pre"), 28 | actionLink(inputId = "", label = "lcpmgh.com", icon = icon("home"), onclick ="window.location.href='http://lcpmgh.com/'") 29 | ), 30 | tags$div(align = "center", 31 | tags$a("冀ICP备2022003075号", target="_blank", href="https://beian.miit.gov.cn", style="color:#06c; display:inline;"), 32 | tags$p(" ", style = "display:inline;white-space:pre"), 33 | # tags$img(src="gaba.png"), 34 | tags$a("川公网安备51010702002736", target="_blank", href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010702002736", style="color:#06c; display:inline;") 35 | ) 36 | ) 37 | ) 38 | ) 39 | 40 | server <- function(input, output, session){ 41 | # 数据 42 | colors <- readLines("@colors.txt") %>% str_split(",") %>% lapply(., sort) %>% .[!duplicated(.)] #读取、排序、去重 43 | colors_nasc <- map_int(colors, length) %>% order() %>% colors[.] #按子颜色数量排序 44 | colors_table <- data.frame(col_id=1:length(colors_nasc), col_num=map_int(colors_nasc, length)) #颜色序号数量表 45 | setDT(colors_table) 46 | colors_sect <- colors_table[, c(min(.SD),max(.SD)), .SDcols=1,by="col_num"] %>% 47 | .[, type:=rep(c("min", "max"), nrow(.)/2)] %>% 48 | dcast(., col_num~type, value.var = "V1") %>% 49 | rbind(data.table(col_num="all", 50 | max=max(colors_table$col_id), 51 | min=min(colors_table$col_id)), .) #提取每个数量区间的id范围 52 | # 函数 53 | examp_plot <- function(id, colors_nasc=NULL, custom=c("#F5A889", "#ACD6EC"), alp=0.1){ 54 | # 函数，根据给定颜色id或自定义的颜色，画4个案例图 55 | # id=0时自定义颜色，否则按colors_nasc中的颜色 56 | if(id == 0){ 57 | tcolor <- custom 58 | ncolor <- length(tcolor) 59 | } else{ 60 | tcolor <- colors_nasc[[id]] 61 | ncolor <- length(tcolor) 62 | } 63 | # 图1.bar 64 | dat_bar <- data.frame(a=sample(letters, ncolor, replace = F), 65 | b=runif(ncolor, 7, 10)) 66 | p_bar <- ggplot(dat_bar, aes(a, b, fill=a))+ 67 | geom_bar(color="black", stat = "identity", alpha=alp)+ 68 | scale_y_continuous(expand = c(0,0,0,0.1))+ 69 | scale_fill_manual(values = tcolor)+ 70 | labs(x="x-axis", y="y-axis", title = "Bar Chart with outlines")+ 71 | theme_bw()+theme(plot.title = element_text(hjust = 0.5)) 72 | # 图2.box 73 | dat_box <- data.frame(a=sample(letters, ncolor, replace = F), 74 | b=runif(ncolor*20, 7, 10)) 75 | p_box <- ggplot(dat_box, aes(a, b, fill=a))+ 76 | stat_boxplot(geom = "errorbar", linewidth=0.8, width = 0.3)+ 77 | geom_boxplot(alpha=alp)+ 78 | scale_fill_manual(values = tcolor)+ 79 | labs(x="x-axis", y="y-axis", title = "Boxplot with outlines")+ 80 | theme_bw()+theme(plot.title = element_text(hjust = 0.5)) 81 | # 图3.point 82 | dat_point <- data.frame(a=rep(runif(30), ncolor), 83 | b=rep(runif(30), ncolor), 84 | t=rep(sample(letters, ncolor, replace = F), 30)) 85 | p_point <- ggplot(dat_point, aes(a, b, color=t, fill=t))+ 86 | geom_point(shape=21, size=5, alpha=alp)+ 87 | scale_color_manual(values = tcolor)+ 88 | scale_fill_manual(values = tcolor)+ 89 | labs(x="x-axis", y="y-axis", title = "scatterplot without outlines")+ 90 | theme_bw()+theme(plot.title = element_text(hjust = 0.5)) 91 | # 图4.line 92 | dat_line <- data.frame(a=rep(1:20, ncolor), 93 | b=rep(1:ncolor, each=20)+rnorm(20*ncolor, 0, 0.3), 94 | t=rep(sample(letters, ncolor), each=20)) 95 | p_line <- ggplot(dat_line, aes(a, b, color=t, group=t))+ 96 | geom_line(linewidth=1, alpha=alp)+ 97 | scale_color_manual(values = tcolor)+ 98 | labs(x="x-axis", y="y-axis", title = "Line chart without outlines")+ 99 | theme_bw()+theme(plot.title = element_text(hjust = 0.5)) 100 | # 合并 101 | p <- grid.arrange(p_bar, p_box, p_point, p_line, padding=0, nrow = 2, ncol = 2) 102 | return(p) 103 | } 104 | iscolors <- function(str){ 105 | # 函数，使用str_detect检查str是否是正确的颜色HEX码 106 | if(nchar(str_trim(str))<1) return(F) #如果str是空，直接返回F 107 | colo <- str_split(str, "[,，;、 ]") %>% unlist() %>% str_trim() %>% .[nchar(.) > 0] %>% .[!duplicated(.)] 108 | sig <- str_detect(colo, "^#[A-Fa-f0-9]{6}$") 109 | if(any(!sig) | length(colo)>16){ 110 | # 如不是颜色，返回F 111 | return(F) 112 | } else{ 113 | # 如是颜色，返回颜色HEX 114 | return(colo) 115 | } 116 | } 117 | 118 | ##### ui ##### 119 | output$uipanel <- renderUI({ 120 | tagList( 121 | tags$head(tags$link(rel = "shortcut icon", href = "pmgh.ico")), 122 | tags$style(HTML(".custom-margin {margin-bottom: 20px;}")), 123 | tags$div(class = "custom-margin", 124 | HTML("

方案选择

"), 125 | HTML(paste("
(数据库内现有", length(colors_nasc), "种配色方案)
"))), 126 | radioButtons(inputId = "showtype", 127 | label = NULL, 128 | choices = list("配色数据库方案id" = "id", "自定义配色方案" = "custom"), 129 | inline = T, 130 | selected = c("按数量" = "id")), 131 | # 按id 132 | conditionalPanel(condition = "input.showtype == 'id'", 133 | selectInput(inputId = "num_select", 134 | label = "选色颜色数量", 135 | choices = colors_sect$col_num, 136 | selected = "all", 137 | multiple = FALSE), 138 | div(style = "display: flex; align-items: center; width:700px", 139 | sliderTextInput(inputId = "id_select", 140 | label = "选择方案id", 141 | choices = seq(colors_sect[[1, "min"]], colors_sect[[1, "max"]]), 142 | selected = colors_sect[[1, "min"]], 143 | width = "500px", 144 | grid = T), 145 | div(style = "width: 15%; text-align: center; padding-left: 20px;", 146 | shiny::actionButton(inputId = "pre", 147 | label = "上一个", 148 | icon = icon("angle-left"))), 149 | div(style = "width: 15%; text-align: center;", 150 | shiny::actionButton(inputId = "nex", 151 | label = "下一个", 152 | icon = icon("angle-right"))))), 153 | # 自定义 154 | conditionalPanel(condition = "input.showtype == 'custom'", 155 | div(style = "display: flex; align-items: center; width:700px", 156 | colourInput(inputId = "sele_col", 157 | label = "追加颜色", 158 | allowTransparent = T, 159 | width = "174px", 160 | value = "skyblue"), 161 | div(style = "width: 15%; text-align: center; padding-left: 20px; padding-top: 10px;", 162 | shiny::actionButton(inputId = "add_col", 163 | label = "加入", 164 | icon = icon("plus"))), 165 | div(style = "width: 15%; text-align: center; padding-left: 10px; padding-top: 10px;", 166 | shiny::actionButton(inputId = "reset_col", 167 | label = "重置", 168 | icon = icon("redo")))), 169 | textInput(inputId = "col_custom", 170 | label = "自定义颜色（HEX码，多个颜色以逗号、顿号、空格、分号间隔，颜色数量不可超过16，结果将去重）：", 171 | width = "1000px", 172 | value = "#4DBBD5, #00A087, #E64B35")), 173 | # 选择结果 174 | h3("所选配色方案"), 175 | reactableOutput(outputId = "colors_info"), 176 | # h3("颜色透明度"), 177 | sliderTextInput(inputId = "color_alpha", 178 | label = "颜色透明度（颜色图层的alpha值）", 179 | choices = seq(0,1, by=0.05), 180 | selected = 1, 181 | grid = T, 182 | width = "500px"), 183 | div(style = "display: flex; align-items: center; width:1021px", 184 | div(style = "width: 50%; text-align: center;", 185 | h3("绘图效果"), 186 | plotOutput(outputId = "plot_example", width = "510px", height = "400px")), 187 | div(style = "width: 50%; text-align: center;", 188 | h3("方案样式"), 189 | plotOutput(outputId = "plot_color", width = "510px", height = "400px"))), 190 | h3("配色数据库（点击表格显示绘图效果）"), 191 | tags$head(tags$style(HTML(".reactable-hover .rt-tr-group:hover {cursor: pointer;}"))), 192 | reactableOutput(outputId = "colors_db") 193 | ) 194 | }) 195 | 196 | ##### server ##### 197 | # 点击颜色数量，更新下面sliderTextInput中备选id的区间 198 | observeEvent(input$num_select, { 199 | selected_row <- colors_sect[col_num == input$num_select,] 200 | selected_seq <- seq(selected_row$min, selected_row$max) 201 | updateSliderTextInput(session, "id_select", 202 | choices = selected_seq, 203 | selected = selected_seq[1]) 204 | }) 205 | # 点击上一个或下一个后，更新slider对应的值 206 | observeEvent(input$pre, { 207 | selected_row <- colors_sect[col_num == input$num_select,] 208 | selected_seq <- seq(selected_row$min, selected_row$max) 209 | newValue <- max(selected_seq[1], as.numeric(input$id_select) - 1) 210 | updateSliderTextInput(session, "id_select", selected = newValue) 211 | }) 212 | observeEvent(input$nex, { 213 | selected_row <- colors_sect[col_num == input$num_select,] 214 | selected_seq <- seq(selected_row$min, selected_row$max) 215 | newValue <- min(tail(selected_seq,1), as.numeric(input$id_select) + 1) 216 | updateSliderTextInput(session, "id_select", selected = newValue) 217 | }) 218 | # 点击加入或重置颜色，更新textinput 219 | observeEvent(input$add_col, { 220 | newValue <- str_split(input$col_custom, "[,，;、 ]") %>% 221 | unlist() %>% 222 | str_trim() %>% 223 | .[nchar(.) > 0] %>% 224 | c(., input$sele_col) %>% 225 | .[!duplicated(.)] %>% 226 | paste0(collapse = ",") 227 | updateTextInput(session, "col_custom", value = newValue) 228 | }) 229 | observeEvent(input$reset_col, { 230 | newValue <- "#4DBBD5, #00A087, #E64B35" 231 | updateTextInput(session, "col_custom", value = newValue) 232 | }) 233 | 234 | # 动态数据 235 | rv <- reactiveValues() #创建一个反应值对象rv，用于存储反应性的数据 236 | rv$value <- 1 #初始值为1 237 | observeEvent(c(input$id_select, input$showtype), { 238 | # 监听多个位置，如果有变动，则运行下面的内容，生成显示颜色方案的id 239 | if(input$showtype == "id"){ 240 | # 如果此时页面为按id，则按选择的id更新id 241 | id <- input$id_select %>% as.numeric() 242 | rv$value <- id 243 | } 244 | }) 245 | 246 | # table.1：所选配色方案 247 | output$colors_info <- renderReactable({ 248 | showtype <- input$showtype 249 | custtext <- input$col_custom 250 | if(showtype == "id"){ 251 | # 如果非自定义，则按id显示方案信息 252 | id <- rv$value 253 | colo_inf <- data.frame(id=id, 254 | colors_n=length(colors_nasc[[id]]), 255 | colors_hex=paste0(colors_nasc[[id]], collapse = ", "), 256 | colors_show=paste0(colors_nasc[[id]], collapse = ", ")) 257 | } else{ 258 | # 如果自定义 259 | colsig <- iscolors(custtext) 260 | if(isFALSE(colsig)){ 261 | # 如果输入的字符不是颜色，则显示ERROR 262 | colo_inf <- data.frame(id=0, 263 | colors_n="ERROR", 264 | colors_hex="ERROR", 265 | colors_show="FFFFFF") 266 | } else{ 267 | # 如果未输入或输入的字符是颜色，则显示自定义的颜色信息 268 | colo_inf <- data.frame(id=0, 269 | colors_n=length(colsig), 270 | colors_hex=paste0(colsig, collapse = ", "), 271 | colors_show=paste0(colsig, collapse = ", ")) 272 | } 273 | } 274 | # 显示表格 275 | reactable(colo_inf, 276 | columns = list( 277 | id = colDef(name = "方案id", width = 60, align = "center", style = list(display = "flex", alignItems = "center", justifyContent = "center")), 278 | colors_n = colDef(name = "所含颜色数", width = 90, align = "center", style = list(display = "flex", alignItems = "center", justifyContent = "center")), 279 | colors_hex = colDef(name = "颜色HEX码", width = 650, align = "center", style = list(display = "flex", alignItems = "center", justifyContent = "center")), 280 | colors_show=colDef(name = "颜色预览", align = "center", cell = function(value) { 281 | color_list <- strsplit(value, ", ")[[1]] 282 | color_divs <- lapply(color_list, function(color) { 283 | tags$div(style = paste("width: 20px; height: 20px; background-color:", color, "; display: inline-block; margin-right: 5px; border: 1px solid black;")) 284 | }) 285 | do.call(tagList, color_divs) 286 | }, style = list(display = "flex", alignItems = "center", justifyContent = "center")) 287 | ), 288 | sortable = F, 289 | resizable = F, 290 | showPageSizeOptions = F, 291 | highlight = F, 292 | striped = T, 293 | bordered = T, 294 | compact = F, 295 | width = "1020px", 296 | fullWidth = F) 297 | }) 298 | 299 | # fig.1：绘图效果 300 | output$plot_example <- renderPlot({ 301 | showtype <- input$showtype 302 | custtext <- input$col_custom 303 | coloralp <- input$color_alpha %>% as.numeric() 304 | if(showtype == "id"){ 305 | id <- rv$value 306 | pic <- examp_plot(id, colors_nasc, alp = coloralp) 307 | } else{ 308 | colsig <- iscolors(custtext) 309 | if(isFALSE(colsig)){ 310 | pic <- ggplot(data=NULL, aes(1,1))+ 311 | geom_text(label="ERROR", hjust=0.5, vjust=0.5, size=8)+ 312 | theme_void() 313 | } else{ 314 | pic <- examp_plot(0, NULL, colsig, alp = coloralp) 315 | } 316 | } 317 | return(pic) 318 | }) 319 | 320 | # fig.2：方案样式 321 | output$plot_color <- renderPlot({ 322 | showtype <- input$showtype 323 | custtext <- input$col_custom 324 | if(showtype == "id"){ 325 | id <- rv$value 326 | pic <- show_col(colors_nasc[[id]]) 327 | } else{ 328 | colsig <- iscolors(custtext) 329 | if(isFALSE(colsig)){ 330 | pic <- ggplot(data=NULL, aes(1,1))+ 331 | geom_text(label="ERROR", hjust=0.5, vjust=0.5, size=8)+ 332 | theme_void() 333 | } else{ 334 | pic <- show_col(colsig) 335 | } 336 | } 337 | return(pic) 338 | }) 339 | 340 | # table.2：配色数据库详情 341 | output$colors_db <- renderReactable({ 342 | showtype <- input$showtype 343 | colnum <- colors_sect[col_num == input$num_select,] #根据所选颜色数量更新数据库表格 344 | id_min <- colnum$min 345 | id_max <- colnum$max 346 | colo_db <- data.table(id=colors_table$col_id, 347 | colors_n=colors_table$col_num, 348 | colors_hex=map_chr(colors_nasc, ~paste0(.x, collapse = ", ")), 349 | colors_show=map_chr(colors_nasc, ~paste0(.x, collapse = ", "))) %>% 350 | .[id>=id_min&id<=id_max,] 351 | class_name <- if (input$showtype == "id") "reactable-hover" else "" #当用户选择id时，才有hover属性 352 | reactable(colo_db, 353 | columns = list( 354 | id = colDef(name = "方案id", width = 60, align = "center", style = list(display = "flex", alignItems = "center", justifyContent = "center")), 355 | colors_n = colDef(name = "所含颜色数", width = 90, align = "center", style = list(display = "flex", alignItems = "center", justifyContent = "center")), 356 | colors_hex = colDef(name = "颜色HEX码", width = 650, align = "center", style = list(display = "flex", alignItems = "center", justifyContent = "center")), 357 | colors_show=colDef(name = "颜色预览", align = "center", cell = function(value) { 358 | color_list <- strsplit(value, ", ")[[1]] 359 | color_divs <- lapply(color_list, function(color) { 360 | tags$div(style = paste("width: 20px; height: 20px; background-color:", color, "; display: inline-block; margin-right: 5px; border: 1px solid black;")) 361 | }) 362 | do.call(tagList, color_divs) 363 | }, style = list(display = "flex", alignItems = "center", justifyContent = "center")) 364 | ), 365 | class = class_name, 366 | language = reactableLang(searchPlaceholder = "查找..."), 367 | sortable = F, 368 | resizable = F, 369 | showPageSizeOptions = T, 370 | searchable = T, 371 | highlight = T, 372 | striped = T, 373 | bordered = T, 374 | compact = F, 375 | width = "1020px", 376 | fullWidth = F, 377 | theme = reactableTheme(searchInputStyle = list("margin-top" = "7px", "margin-right" = "7px")), 378 | onClick = if(showtype != "custom"){ 379 | JS("function(rowInfo, colInfo) { 380 | if (window.Shiny) { 381 | Shiny.setInputValue('selected_row', rowInfo.index + 1); 382 | window.scrollTo({ 383 | top: 0, 384 | left: 0, 385 | behavior:'smooth'}); // 平滑滚动到页面顶部 386 | } 387 | }")} 388 | ) 389 | }) 390 | 391 | # 点击表格更新绘图效果 392 | observeEvent(input$selected_row, { 393 | selected_row <- input$selected_row 394 | if (!is.null(selected_row)) { 395 | colnum <- colors_sect[col_num == input$num_select,] #所选颜色数量对应的id区间 396 | selected_id <- seq(colnum$min, colnum$max)[selected_row] #提取id区间，点击的行号，对应的准确id 397 | updateSliderTextInput(session, "id_select", selected = selected_id) #更新selected 398 | } 399 | }) 400 | 401 | } 402 | 403 | # 输出app 404 | shinyApp(ui, server) -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lcpmgh/colors/5a980c4d74dfabde766e7f18c6301ca199ce05b7/preview.png -------------------------------------------------------------------------------- /www/gaba.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lcpmgh/colors/5a980c4d74dfabde766e7f18c6301ca199ce05b7/www/gaba.png -------------------------------------------------------------------------------- /www/pmgh.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lcpmgh/colors/5a980c4d74dfabde766e7f18c6301ca199ce05b7/www/pmgh.ico --------------------------------------------------------------------------------