首先我得到了一张我必须显示的图像(可以是任何东西)，我还得到了很多关于图像的哪个区域被评为 1-5 的数据

这是我必须在其上显示热图的网格图像

至于我得到的数据是这样的

• 从_X，从_Y，到_X，到_Y，得分
• 878、1148、1620、2093、1
• 0、0、2498、2025、3
• 0、0、1013、675、5
• 675, 2228, 1958, 3105, 1
• 203、203、1148、1080、3
• 203、135、1553、1350、4

现在我做的第一件事是求一个正方形的总和，看起来像这样

{"0_0":2.6666666666666665,"0_1":2.6666666666666665,"0_2":2.6666666666666665,"0_3":2.6666666666666665,"0_4":2.6666666666666665,"0_5":2.6666666666666665,"0_6":2.6666666666666665,"0_7":2.6666666666666665,"0_8":2.6666666666666665,"0_9":2.6666666666666665,"0_10":1.5,"0_11":1.5,"0_12":1.5,"0_13":1.5,"0_14":1.5,"0_15":1.5,"0_16":1.5,"0_17":1.5,"0_18":1.5,"0_19":1.5,"0_20":1.5,"0_21":1.5,"0_22":1.5,"0_23":1.5,"0_24":1.5,"0_25":1.5,"0_26":1.5,"0_27":1.5,"0_28":1.5,"0_29":1.5,"0_30":0,"0_31":0,"0_32":0,"0_33":0,"0_34":0,"0_35":0,"0_36":0,"0_37":0,"0_38":0,"0_39":0,"0_40":0,"0_41":0,"0_42":0,"0_43":0,"0_44":0,"0_45":0,"0_46":0,"0_47":0,"0_48":0,"1_0":2.6666666666666665,"1_1":2.6666666666666665,"1_2":2.6666666666666665,"1_3":2.6666666666666665,"1_4":2.6666666666666665,"1_5":2.6666666666666665,"1_6":2.6666666666666665,"1_7":2.6666666666666665,"1_8":2.6666666666666665,"1_9":2.6666666666666665,"1_10":1.5,"1_11":1.5,"1_12":1.5,"1_13":1.5,"1_14":1.5,"1_15":1.5,"1_16":1.5,"1_17":1.5,"1_18":1.5,"1_19":1.5,"1_20":1.5,"1_21":1.5,"1_22":1.5,"1_23":1.5,"1_24":1.5,"1_25":1.5,"1_26":1.5,"1_27":1.5,"1_28":1.5,"1_29":1.5,"1_30":0,"1_31":0,"1_32":0,"1_33":0,"1_34":0,"1_35":0,"1_36":0,"1_37":0,"1_38":0,"1_39":0,"1_40":0,"1_41":0,"1_42":0,"1_43":0,"1_44":0,"1_45":0,"1_46":0,"1_47":0,"1_48":0,"2_0":2.6666666666666665,"2_1":2.6666666666666665,"2_2":2.6666666666666665,"2_3":2.6666666666666665,"2_4":2.6666666666666665,"2_5":2.6666666666666665,"2_6":2.6666666666666665,"2_7":2.6666666666666665,"2_8":2.6666666666666665,"2_9":2.6666666666666665,"2_10":1.5,"2_11":1.5,"2_12":1.5,"2_13":1.5,"2_14":1.5,"2_15":1.5,"2_16":1.5,"2_17":1.5,"2_18":1.5,"2_19":1.5,"2_20":1.5,"2_21":1.5,"2_22":1.5,"2_23":1.5,"2_24":1.5,"2_25":1.5,"2_26":1.5,"2_27":1.5,"2_28":1.5,"2_29":1.5,"2_30":0,"2_31":0,"2_32":0,"2_33":0,"2_34":0,"2_35":0,"2_36":0,"2_37":0,"2_38":0,"2_39":0,"2_40":0,"2_41":0,"2_42":0,"2_43":0,"2_44":0,"2_45":0,"2_46":0,"2_47":0,"2_48":0,"3_0":2.6666666666666665,"3_1":2.6666666666666665,"3_2":3,"3_3":3,"3_4":3,"3_5":3,"3_6":3,"3_7":3,"3_8":3,"3_9":3,"3_10":2.5,"3_11":2.5,"3_12":2.5,"3_13":2.5,"3_14":2.5,"3_15":2.5,"3_16":2.3333333333333335,"3_17":2.3333333333333335,"3_18":2.3333333333333335,"3_19":2.3333333333333335,"3_20":1.5,"3_21":1.5,"3_22":1.5,"3_23":1.5,"3_24":1.5,"3_25":1.5,"3_26":1.5,"3_27":1.5,"3_28":1.5,"3_29":1.5,"3_30":0,"3_31":0,"3_32":0,"3_33":0,"3_34":0,"3_35":0,"3_36":0,"3_37":0,"3_38":0,"3_39":0,"3_40":0,"3_41":0,"3_42":0,"3_43":0,"3_44":0,"3_45":0,"3_46":0,"3_47":0,"3_48":0,"4_0":2.6666666666666665,"4_1":2.6666666666666665,"4_2":3,"4_3":3,"4_4":3,"4_5":3,"4_6":3,"4_7":3,"4_8":3,"4_9":3,"4_10":2.5,"4_11":2.5,"4_12":2.5,"4_13":2.5,"4_14":2.5,"4_15":2.5,"4_16":2.3333333333333335,"4_17":2.3333333333333335,"4_18":2.3333333333333335,"4_19":2.3333333333333335,"4_20":1.5,"4_21":1.5,"4_22":1.5,"4_23":1.5,"4_24":1.5,"4_25":1.5,"4_26":1.5,"4_27":1.5,"4_28":1.5,"4_29":1.5,"4_30":0,"4_31":0,"4_32":0,"4_33":0,"4_34":0,"4_35":0,"4_36":0,"4_37":0,"4_38":0,"4_39":0,"4_40":0,"4_41":0,"4_42":0,"4_43":0,"4_44":0,"4_45":0,"4_46":0,"4_47":0,"4_48":0,"5_0":2.6666666666666665,"5_1":2.6666666666666665,"5_2":3,"5_3":3,"5_4":3,"5_5":3,"5_6":3,"5_7":3,"5_8":3,"5_9":3,"5_10":2.5,"5_11":2.5,"5_12":2.5,"5_13":2.5,"5_14":2.5,"5_15":2.5,"5_16":2.3333333333333335,"5_17":2.3333333333333335,"5_18":2.3333333333333335,"5_19":2.3333333333333335,"5_20":1.5,"5_21":1.5,"5_22":1.5,"5_23":1.5,"5_24":1.5,"5_25":1.5,"5_26":1.5,"5_27":1.5,"5_28":1.5,"5_29":1.5,"5_30":0,"5_31":0,"5_32":0,"5_33":0,"5_34":0,"5_35":0,"5_36":0,"5_37":0,"5_38":0,"5_39":0,"5_40":0,"5_41":0,"5_42":0,"5_43":0,"5_44":0,"5_45":0,"5_46":0,"5_47":0,"5_48":0,"6_0":2.6666666666666665,"6_1":2.6666666666666665,"6_2":3,"6_3":3,"6_4":3,"6_5":3,"6_6":3,"6_7":3,"6_8":3,"6_9":3,"6_10":2.5,"6_11":2.5,"6_12":2.5,"6_13":2.5,"6_14":2.5,"6_15":2.5,"6_16":2.3333333333333335,"6_17":2.3333333333333335,"6_18":2.3333333333333335,"6_19":2.3333333333333335,"6_20":1.5,"6_21":1.5,"6_22":1.5,"6_23":1.5,"6_24":1.5,"6_25":1.5,"6_26":1.5,"6_27":1.5,"6_28":1.5,"6_29":1.5,"6_30":0,"6_31":0,"6_32":0,"6_33":0,"6_34":0,"6_35":0,"6_36":0,"6_37":0,"6_38":0,"6_39":0,"6_40":0,"6_41":0,"6_42":0,"6_43":0,"6_44":0,"6_45":0,"6_46":0,"6_47":0,"6_48":0,"7_0":2.6666666666666665,"7_1":2.6666666666666665,"7_2":3,"7_3":3,"7_4":3,"7_5":3,"7_6":3,"7_7":3,"7_8":3,"7_9":3,"7_10":2.5,"7_11":2.5,"7_12":2.5,"7_13":2.5,"7_14":2.5,"7_15":2.5,"7_16":2.3333333333333335,"7_17":2.3333333333333335,"7_18":2.3333333333333335,"7_19":2.3333333333333335,"7_20":1.5,"7_21":1.5,"7_22":1.5,"7_23":1.5,"7_24":1.5,"7_25":1.5,"7_26":1.5,"7_27":1.5,"7_28":1.5,"7_29":1.5,"7_30":0,"7_31":0,"7_32":0,"7_33":0,"7_34":0,"7_35":0,"7_36":0,"7_37":0,"7_38":0,"7_39":0,"7_40":0,"7_41":0,"7_42":0,"7_43":0,"7_44":0,"7_45":0,"7_46":0,"7_47":0,"7_48":0,"8_0":2.6666666666666665,"8_1":2.6666666666666665,"8_2":3,"8_3":3,"8_4":3,"8_5":3,"8_6":3,"8_7":3,"8_8":3,"8_9":3,"8_10":2.5,"8_11":2.5,"8_12":2.5,"8_13":2.5,"8_14":2.5,"8_15":2.5,"8_16":2.3333333333333335,"8_17":2.3333333333333335,"8_18":2.3333333333333335,"8_19":2.3333333333333335,"8_20":1.5,"8_21":1.5,"8_22":1.5,"8_23":1.5,"8_24":1.5,"8_25":1.5,"8_26":1.5,"8_27":1.5,"8_28":1.5,"8_29":1.5,"8_30":0,"8_31":0,"8_32":0,"8_33":0,"8_34":0,"8_35":0,"8_36":0,"8_37":0,"8_38":0,"8_39":0,"8_40":0,"8_41":0,"8_42":0,"8_43":0,"8_44":0,"8_45":0,"8_46":0,"8_47":0,"8_48":0,"9_0":2.6666666666666665,"9_1":2.6666666666666665,"9_2":3,"9_3":3,"9_4":3,"9_5":3,"9_6":3,"9_7":3,"9_8":3,"9_9":3,"9_10":2.5,"9_11":2.5,"9_12":2.5,"9_13":2.5,"9_14":2.5,"9_15":2.5,"9_16":2.3333333333333335,"9_17":2.3333333333333335,"9_18":2.3333333333333335,"9_19":2.3333333333333335,"9_20":1.5,"9_21":1.5,"9_22":1.5,"9_23":1.5,"9_24":1.5,"9_25":1.5,"9_26":1.5,"9_27":1.5,"9_28":1.5,"9_29":1.5,"9_30":0,"9_31":0,"9_32":0,"9_33":0,"9_34":0,"9_35":0,"9_36":0,"9_37":0,"9_38":0,"9_39":0,"9_40":0,"9_41":0,"9_42":0,"9_43":0,"9_44":0,"9_45":0,"9_46":0,"9_47":0,"9_48":0,"10_0":2.6666666666666665,"10_1":2.6666666666666665,"10_2":3,"10_3":3,"10_4":3,"10_5":3,"10_6":3,"10_7":3,"10_8":3,"10_9":3,"10_10":2.5,"10_11":2.5,"10_12":2.5,"10_13":2.5,"10_14":2.5,"10_15":2.5,"10_16":2.3333333333333335,"10_17":2.3333333333333335,"10_18":2.3333333333333335,"10_19":2.3333333333333335,"10_20":1.5,"10_21":1.5,"10_22":1.5,"10_23":1.5,"10_24":1.5,"10_25":1.5,"10_26":1.5,"10_27":1.5,"10_28":1.5,"10_29":1.5,"10_30":0,"10_31":0,"10_32":0,"10_33":0.5,"10_34":0.5,"10_35":0.5,"10_36":0.5,"10_37":0.5,"10_38":0.5,"10_39":0.5,"10_40":0.5,"10_41":0.5,"10_42":0.5,"10_43":0.5,"10_44":0.5,"10_45":0.5,"10_46":0,"10_47":0,"10_48":0}

下一步我要做的是规范化数据，这样我就可以像这样从 0-1 中得到一个值

{"0_0":0.8888888888888888,"0_1":0.8888888888888888,"0_2":0.8888888888888888,"0_3":0.8888888888888888,"0_4":0.8888888888888888,"0_5":0.8888888888888888,"0_6":0.8888888888888888,"0_7":0.8888888888888888,"0_8":0.8888888888888888,"0_9":0.8888888888888888,"0_10":0.5,"0_11":0.5,"0_12":0.5,"0_13":0.5,"0_14":0.5,"0_15":0.5,"0_16":0.5,"0_17":0.5,"0_18":0.5,"0_19":0.5,"0_20":0.5,"0_21":0.5,"0_22":0.5,"0_23":0.5,"0_24":0.5,"0_25":0.5,"0_26":0.5,"0_27":0.5,"0_28":0.5,"0_29":0.5,"0_30":0,"0_31":0,"0_32":0,"0_33":0,"0_34":0,"0_35":0,"0_36":0,"0_37":0,"0_38":0,"0_39":0,"0_40":0,"0_41":0,"0_42":0,"0_43":0,"0_44":0,"0_45":0,"0_46":0,"0_47":0,"0_48":0,"1_0":0.8888888888888888,"1_1":0.8888888888888888,"1_2":0.8888888888888888,"1_3":0.8888888888888888,"1_4":0.8888888888888888,"1_5":0.8888888888888888,"1_6":0.8888888888888888,"1_7":0.8888888888888888,"1_8":0.8888888888888888,"1_9":0.8888888888888888,"1_10":0.5,"1_11":0.5,"1_12":0.5,"1_13":0.5,"1_14":0.5,"1_15":0.5,"1_16":0.5,"1_17":0.5,"1_18":0.5,"1_19":0.5,"1_20":0.5,"1_21":0.5,"1_22":0.5,"1_23":0.5,"1_24":0.5,"1_25":0.5,"1_26":0.5,"1_27":0.5,"1_28":0.5,"1_29":0.5,"1_30":0,"1_31":0,"1_32":0,"1_33":0,"1_34":0,"1_35":0,"1_36":0,"1_37":0,"1_38":0,"1_39":0,"1_40":0,"1_41":0,"1_42":0,"1_43":0,"1_44":0,"1_45":0,"1_46":0,"1_47":0,"1_48":0,"2_0":0.8888888888888888,"2_1":0.8888888888888888,"2_2":0.8888888888888888,"2_3":0.8888888888888888,"2_4":0.8888888888888888,"2_5":0.8888888888888888,"2_6":0.8888888888888888,"2_7":0.8888888888888888,"2_8":0.8888888888888888,"2_9":0.8888888888888888,"2_10":0.5,"2_11":0.5,"2_12":0.5,"2_13":0.5,"2_14":0.5,"2_15":0.5,"2_16":0.5,"2_17":0.5,"2_18":0.5,"2_19":0.5,"2_20":0.5,"2_21":0.5,"2_22":0.5,"2_23":0.5,"2_24":0.5,"2_25":0.5,"2_26":0.5,"2_27":0.5,"2_28":0.5,"2_29":0.5,"2_30":0,"2_31":0,"2_32":0,"2_33":0,"2_34":0,"2_35":0,"2_36":0,"2_37":0,"2_38":0,"2_39":0,"2_40":0,"2_41":0,"2_42":0,"2_43":0,"2_44":0,"2_45":0,"2_46":0,"2_47":0,"2_48":0,"3_0":0.8888888888888888,"3_1":0.8888888888888888,"3_2":1,"3_3":1,"3_4":1,"3_5":1,"3_6":1,"3_7":1,"3_8":1,"3_9":1,"3_10":0.8333333333333334,"3_11":0.8333333333333334,"3_12":0.8333333333333334,"3_13":0.8333333333333334,"3_14":0.8333333333333334,"3_15":0.8333333333333334,"3_16":0.7777777777777778,"3_17":0.7777777777777778,"3_18":0.7777777777777778,"3_19":0.7777777777777778,"3_20":0.5,"3_21":0.5,"3_22":0.5,"3_23":0.5,"3_24":0.5,"3_25":0.5,"3_26":0.5,"3_27":0.5,"3_28":0.5,"3_29":0.5,"3_30":0,"3_31":0,"3_32":0,"3_33":0,"3_34":0,"3_35":0,"3_36":0,"3_37":0,"3_38":0,"3_39":0,"3_40":0,"3_41":0,"3_42":0,"3_43":0,"3_44":0,"3_45":0,"3_46":0,"3_47":0,"3_48":0,"4_0":0.8888888888888888,"4_1":0.8888888888888888,"4_2":1,"4_3":1,"4_4":1,"4_5":1,"4_6":1,"4_7":1,"4_8":1,"4_9":1,"4_10":0.8333333333333334,"4_11":0.8333333333333334,"4_12":0.8333333333333334,"4_13":0.8333333333333334,"4_14":0.8333333333333334,"4_15":0.8333333333333334,"4_16":0.7777777777777778,"4_17":0.7777777777777778,"4_18":0.7777777777777778,"4_19":0.7777777777777778,"4_20":0.5,"4_21":0.5,"4_22":0.5,"4_23":0.5,"4_24":0.5,"4_25":0.5,"4_26":0.5,"4_27":0.5,"4_28":0.5,"4_29":0.5,"4_30":0,"4_31":0,"4_32":0,"4_33":0,"4_34":0,"4_35":0,"4_36":0,"4_37":0,"4_38":0,"4_39":0,"4_40":0,"4_41":0,"4_42":0,"4_43":0,"4_44":0,"4_45":0,"4_46":0,"4_47":0,"4_48":0,"5_0":0.8888888888888888,"5_1":0.8888888888888888,"5_2":1,"5_3":1,"5_4":1,"5_5":1,"5_6":1,"5_7":1,"5_8":1,"5_9":1,"5_10":0.8333333333333334,"5_11":0.8333333333333334,"5_12":0.8333333333333334,"5_13":0.8333333333333334,"5_14":0.8333333333333334,"5_15":0.8333333333333334,"5_16":0.7777777777777778,"5_17":0.7777777777777778,"5_18":0.7777777777777778,"5_19":0.7777777777777778,"5_20":0.5,"5_21":0.5,"5_22":0.5,"5_23":0.5,"5_24":0.5,"5_25":0.5,"5_26":0.5,"5_27":0.5,"5_28":0.5,"5_29":0.5,"5_30":0,"5_31":0,"5_32":0,"5_33":0,"5_34":0,"5_35":0,"5_36":0,"5_37":0,"5_38":0,"5_39":0,"5_40":0,"5_41":0,"5_42":0,"5_43":0,"5_44":0,"5_45":0,"5_46":0,"5_47":0,"5_48":0,"6_0":0.8888888888888888,"6_1":0.8888888888888888,"6_2":1,"6_3":1,"6_4":1,"6_5":1,"6_6":1,"6_7":1,"6_8":1,"6_9":1,"6_10":0.8333333333333334,"6_11":0.8333333333333334,"6_12":0.8333333333333334,"6_13":0.8333333333333334,"6_14":0.8333333333333334,"6_15":0.8333333333333334,"6_16":0.7777777777777778,"6_17":0.7777777777777778,"6_18":0.7777777777777778,"6_19":0.7777777777777778,"6_20":0.5,"6_21":0.5,"6_22":0.5,"6_23":0.5,"6_24":0.5,"6_25":0.5,"6_26":0.5,"6_27":0.5,"6_28":0.5,"6_29":0.5,"6_30":0,"6_31":0,"6_32":0,"6_33":0,"6_34":0,"6_35":0,"6_36":0,"6_37":0,"6_38":0,"6_39":0,"6_40":0,"6_41":0,"6_42":0,"6_43":0,"6_44":0,"6_45":0,"6_46":0,"6_47":0,"6_48":0,"7_0":0.8888888888888888,"7_1":0.8888888888888888,"7_2":1,"7_3":1,"7_4":1,"7_5":1,"7_6":1,"7_7":1,"7_8":1,"7_9":1,"7_10":0.8333333333333334,"7_11":0.8333333333333334,"7_12":0.8333333333333334,"7_13":0.8333333333333334,"7_14":0.8333333333333334,"7_15":0.8333333333333334,"7_16":0.7777777777777778,"7_17":0.7777777777777778,"7_18":0.7777777777777778,"7_19":0.7777777777777778,"7_20":0.5,"7_21":0.5,"7_22":0.5,"7_23":0.5,"7_24":0.5,"7_25":0.5,"7_26":0.5,"7_27":0.5,"7_28":0.5,"7_29":0.5,"7_30":0,"7_31":0,"7_32":0,"7_33":0,"7_34":0,"7_35":0,"7_36":0,"7_37":0,"7_38":0,"7_39":0,"7_40":0,"7_41":0,"7_42":0,"7_43":0,"7_44":0,"7_45":0,"7_46":0,"7_47":0,"7_48":0,"8_0":0.8888888888888888,"8_1":0.8888888888888888,"8_2":1,"8_3":1,"8_4":1,"8_5":1,"8_6":1,"8_7":1,"8_8":1,"8_9":1,"8_10":0.8333333333333334,"8_11":0.8333333333333334,"8_12":0.8333333333333334,"8_13":0.8333333333333334,"8_14":0.8333333333333334,"8_15":0.8333333333333334,"8_16":0.7777777777777778,"8_17":0.7777777777777778,"8_18":0.7777777777777778,"8_19":0.7777777777777778,"8_20":0.5,"8_21":0.5,"8_22":0.5,"8_23":0.5,"8_24":0.5,"8_25":0.5,"8_26":0.5,"8_27":0.5,"8_28":0.5,"8_29":0.5,"8_30":0,"8_31":0,"8_32":0,"8_33":0,"8_34":0,"8_35":0,"8_36":0,"8_37":0,"8_38":0,"8_39":0,"8_40":0,"8_41":0,"8_42":0,"8_43":0,"8_44":0,"8_45":0,"8_46":0,"8_47":0,"8_48":0,"9_0":0.8888888888888888,"9_1":0.8888888888888888,"9_2":1,"9_3":1,"9_4":1,"9_5":1,"9_6":1,"9_7":1,"9_8":1,"9_9":1,"9_10":0.8333333333333334,"9_11":0.8333333333333334,"9_12":0.8333333333333334,"9_13":0.8333333333333334,"9_14":0.8333333333333334,"9_15":0.8333333333333334,"9_16":0.7777777777777778,"9_17":0.7777777777777778,"9_18":0.7777777777777778,"9_19":0.7777777777777778,"9_20":0.5,"9_21":0.5,"9_22":0.5,"9_23":0.5,"9_24":0.5,"9_25":0.5,"9_26":0.5,"9_27":0.5,"9_28":0.5,"9_29":0.5,"9_30":0,"9_31":0,"9_32":0,"9_33":0,"9_34":0,"9_35":0,"9_36":0,"9_37":0,"9_38":0,"9_39":0,"9_40":0,"9_41":0,"9_42":0,"9_43":0,"9_44":0,"9_45":0,"9_46":0,"9_47":0,"9_48":0,"10_0":0.8888888888888888,"10_1":0.8888888888888888,"10_2":1,"10_3":1,"10_4":1,"10_5":1,"10_6":1,"10_7":1,"10_8":1,"10_9":1,"10_10":0.8333333333333334,"10_11":0.8333333333333334,"10_12":0.8333333333333334,"10_13":0.8333333333333334,"10_14":0.8333333333333334,"10_15":0.8333333333333334,"10_16":0.7777777777777778,"10_17":0.7777777777777778,"10_18":0.7777777777777778,"10_19":0.7777777777777778,"10_20":0.5,"10_21":0.5,"10_22":0.5,"10_23":0.5,"10_24":0.5,"10_25":0.5,"10_26":0.5,"10_27":0.5,"10_28":0.5,"10_29":0.5,"10_30":0,"10_31":0,"10_32":0,"10_33":0.16666666666666666,"10_34":0.16666666666666666,"10_35":0.16666666666666666,"10_36":0.16666666666666666,"10_37":0.16666666666666666,"10_38":0.16666666666666666,"10_39":0.16666666666666666,"10_40":0.16666666666666666,"10_41":0.16666666666666666,"10_42":0.16666666666666666,"10_43":0.16666666666666666,"10_44":0.16666666666666666,"10_45":0.16666666666666666,"10_46":0,"10_47":0,"10_48":0}

现在我想用从蓝色(最小)到红色(最大)的颜色为图像(网格)着色，我需要得到一张好图像，它显示最高分数和最好的不透明度，还需要不透明度低于 0.75。

我的得分在 0 - 1 之间

var half = parseFloat(1 / 2);

var color = "";
var a = parseFloat(score).toFixed(4);
var opacity = a;
if(score <= half){
    color = colors[0];
    opacity = parseFloat(1 - a) - 0.25;
}else{
    color = colors[colors.length -1];
    opacity = a - 0.25;
}

color = color.replace('|REPLACE|', opacity);

我的结果是这样的

我想知道如何为正确的正方形着色并获得正确的不透明度？

这是所有分数可见的样子

这只选择了分数 3 和 1

这只是最好的成绩

希望大家帮忙

最佳答案

我是一个名为 heatmap.js 的 JS 库的作者，我认为我已经完成了您正在寻找的内容。这是(或多或少)它在 heatmap.js 中的工作方式:

计算数据点的不透明度

relative_score = (value-min) / (max-min); 
// => your opacity ( within [0;1] )

如果您想要 .75 作为最大不透明度，请将其用作乘数:

final_opacity = relative_score * maximumOpacity; // => the desired opacity within [0;.75] where maximumOpacity=.75

颜色选择

对于您的情况，我建议坚持使用您使用的简单颜色选择机制(一切 <= half="" 将在不同的不透明度下使用蓝色，=""> half 将使用红色)。

如果您对在红色和蓝色之间进行平滑的颜色过渡感兴趣，请按以下方法进行操作:

• 绘制从 colorX 到 colorY 的 1x255 线性渐变
• 阅读颜色 梯度中每个像素的信息并将其存储在数组中

现在你有一个充满颜色的数组(你可以将它们存储为 [r, g, b])并且可以根据你的 relative_score 选择一个:

color_index = Math.min(relative_score * 255)
the_color_you_want = colors[color_index];

(在 heatmap.js 中，这一切都是在客户端使用 HTML5 canvas 完成的，但也可以使用 PHP 完成。)

如果你需要更多的灵感，可以看看heatmap.js的代码

关于javascript - 图像上的 PHP 方形热图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31783357/