PHP方形热图在图像上

Question

开始我得到一个我必须显示的图像（可以是任何东西），并且我还获得了大量关于图像的哪个区域被评为1-5的数据

这是我必须在

上显示热图的网格图像

至于我得到类似的数据

• from_X，from_Y，to_X，to_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

这只有最高分

希望任何人都可以提供帮助

Answer 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

颜色选择

对于你的情况，我建议坚持你使用的简单颜色拣选机制（一切＆lt; =一半将在不同的不透明度中使用蓝色，＆gt;一半将使用红色）。

如果您对红色和红色之间的平滑色彩过渡感兴趣蓝色在这里你是如何做到的：

• 从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的代码