Делаем динамическую гистограмму с использованием JS и jQuery
[vc_row][vc_column][vc_column_text]Задача такая: необходимо сделать вывод на каждой странице гистограммы с оценками. Всего 5 баллов, за каждый балл есть определенное количество голосов. Нужно вывести гистограмму в процентном соотношении голосов за каждую оценку.
Пример реализации ниже:[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_raw_html]JTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJyYXRpbmctaGlzdG9ncmFtJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJyYXRpbmctYmFyLWNvbnRhaW5lciUyMGZpdmUlMjIlMjBkYXRhLWlkJTNEJTIyNSUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ3NwYW4lMjBjbGFzcyUzRCUyMmJhci1sYWJlbCUyMiUzRSUyMDUlMjAlM0MlMkZzcGFuJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDc3BhbiUyMGNsYXNzJTNEJTIyYmFyJTIyJTNFJTNDJTJGc3BhbiUzRSUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ3NwYW4lMjBjbGFzcyUzRCUyMmJhci1udW1iZXIlMjIlM0UlM0MlMkZzcGFuJTNFJTIwJTBBJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJyYXRpbmctYmFyLWNvbnRhaW5lciUyMGZvdXIlMjIlMjBkYXRhLWlkJTNEJTIyNCUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ3NwYW4lMjBjbGFzcyUzRCUyMmJhci1sYWJlbCUyMiUzRSUyMDQlMjAlM0MlMkZzcGFuJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDc3BhbiUyMGNsYXNzJTNEJTIyYmFyJTIyJTNFJTNDJTJGc3BhbiUzRSUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ3NwYW4lMjBjbGFzcyUzRCUyMmJhci1udW1iZXIlMjIlM0UlM0MlMkZzcGFuJTNFJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJyYXRpbmctYmFyLWNvbnRhaW5lciUyMHRocmVlJTIyJTIwZGF0YS1pZCUzRCUyMjMlMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NzcGFuJTIwY2xhc3MlM0QlMjJiYXItbGFiZWwlMjIlM0UlMjAzJTIwJTNDJTJGc3BhbiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ3NwYW4lMjBjbGFzcyUzRCUyMmJhciUyMiUzRSUzQyUyRnNwYW4lM0UlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NzcGFuJTIwY2xhc3MlM0QlMjJiYXItbnVtYmVyJTIyJTNFJTNDJTJGc3BhbiUzRSUyMCUwQSUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIycmF0aW5nLWJhci1jb250YWluZXIlMjB0d28lMjIlMjBkYXRhLWlkJTNEJTIyMiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ3NwYW4lMjBjbGFzcyUzRCUyMmJhci1sYWJlbCUyMiUzRSUyMDIlMjAlM0MlMkZzcGFuJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDc3BhbiUyMGNsYXNzJTNEJTIyYmFyJTIyJTNFJTNDJTJGc3BhbiUzRSUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ3NwYW4lMjBjbGFzcyUzRCUyMmJhci1udW1iZXIlMjIlM0UlM0MlMkZzcGFuJTNFJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJyYXRpbmctYmFyLWNvbnRhaW5lciUyMG9uZSUyMiUyMGRhdGEtaWQlM0QlMjIxJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDc3BhbiUyMGNsYXNzJTNEJTIyYmFyLWxhYmVsJTIyJTNFJTIwMSUyMCUzQyUyRnNwYW4lM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NzcGFuJTIwY2xhc3MlM0QlMjJiYXIlMjIlM0UlM0MlMkZzcGFuJTNFJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDc3BhbiUyMGNsYXNzJTNEJTIyYmFyLW51bWJlciUyMiUzRSUzQyUyRnNwYW4lM0UlMjAlMEElMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlM0MlMkZkaXYlM0UlM0MlMjEtLSUyMCUyRnJhdGluZy1oaXN0b2dyYW0lMjAtLSUzRSUwQSUwQSUwQSUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyaGlkZGVuJTIyJTNFJTNDJTIxLS0lMjBuZWVkcyUyMGZvciUyMGpxdWVyeSUyMGNhbGN1bGF0aW9ucyUyMC0tJTNFJTBBJTIwJTIwJTIwJTIwJTNDZm9ybSUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2lucHV0JTIwdHlwZSUzRCUyMnRleHQlMjIlMjBjbGFzcyUzRCUyMnJldmlld3NfMXN0YXIlMjIlMjB2YWx1ZSUzRCUyMjUlMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NpbnB1dCUyMHR5cGUlM0QlMjJ0ZXh0JTIyJTIwY2xhc3MlM0QlMjJyZXZpZXdzXzJzdGFyJTIyJTIwdmFsdWUlM0QlMjI0JTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDaW5wdXQlMjB0eXBlJTNEJTIydGV4dCUyMiUyMGNsYXNzJTNEJTIycmV2aWV3c18zc3RhciUyMiUyMHZhbHVlJTNEJTIyMiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2lucHV0JTIwdHlwZSUzRCUyMnRleHQlMjIlMjBjbGFzcyUzRCUyMnJldmlld3NfNHN0YXIlMjIlMjB2YWx1ZSUzRCUyMjYlMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NpbnB1dCUyMHR5cGUlM0QlMjJ0ZXh0JTIyJTIwY2xhc3MlM0QlMjJyZXZpZXdzXzVzdGFyJTIyJTIwdmFsdWUlM0QlMjIzJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTNDJTJGZm9ybSUzRSUwQSUyMCUyMCUzQyUyRmRpdiUzRSUzQyUyMS0tJTIwJTJGaGlkZGVuJTIwLS0lM0UlMEE=[/vc_raw_html][vc_raw_js]JTBBJTIwJTIwJTBBJTNDc2NyaXB0JTNFJTBBJTIwJTIwJTIwJTIwalF1ZXJ5JTI4ZnVuY3Rpb24lMjglMjklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjB2YXIlMjBzdGFycyUyMCUzRCUyMG5ldyUyMEFycmF5JTI4JTI5JTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwdmFyJTIwc3VtJTIwJTNEJTIwMCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMHZhciUyMHdpZHRoJTIwJTNEJTIwbmV3JTIwQXJyYXklMjglMjklM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjBmb3IlMjAlMjglMjB2YXIlMjBpJTIwJTNEJTIwMSUzQiUyMGklMjAlM0MlMjA2JTNCJTIwaSUyQiUyQiUyMCUyOSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHN0YXJzLnB1c2glMjhwYXJzZUludCUyOGpRdWVyeSUyOCUyNy5yZXZpZXdzXyUyNyUyQmklMkIlMjdzdGFyJTI3JTI5LnZhbCUyOCUyOSUyOSUyOSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCU3RCUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMGZvciUyMCUyOCUyMHZhciUyMGklMjAlM0QlMjAwJTNCJTIwaSUyMCUzQyUyMHN0YXJzLmxlbmd0aCUzQiUyMGklMkIlMkIlMjAlMjklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBzdW0lMjAlMkIlM0QlMjBzdGFycyU1QmklNUQlM0IlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlN0QlMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjBmb3IlMjAlMjglMjB2YXIlMjBpJTIwJTNEJTIwMCUzQiUyMGklMjAlM0MlMjBzdGFycy5sZW5ndGglM0IlMjBpJTJCJTJCJTIwJTI5JTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwdyUyMCUzRCUyMCUyOCUyOHN0YXJzJTVCaSU1RCUyOSUyMCUyRiUyMHN1bSUyMCUyQSUyMDEwMCUyOS50b0ZpeGVkJTI4MCUyOSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHdpZHRoLnB1c2glMjh3JTI5JTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwalF1ZXJ5JTI4JTI3LnJhdGluZy1iYXItY29udGFpbmVyJTVCZGF0YS1pZCUzRCUyNyUyQiUyOGklMkIxJTI5JTJCJTI3JTVEJTIwLmJhciUyNyUyOS5jc3MlMjglMjd3aWR0aCUyNyUyQyUyMHclMkIlMjclMjUlMjclMjAlMjklM0IlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlN0QlMEElMEElMjAlMjAlMjAlMjAlMjAlMjBpZiUyMCUyOHN1bSUyMCUzRSUyMDAlMjklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBmb3IlMjAlMjglMjB2YXIlMjBpJTIwJTNEJTIwMCUzQiUyMGklMjAlM0MlMjBzdGFycy5sZW5ndGglM0IlMjBpJTJCJTJCJTIwJTI5JTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwalF1ZXJ5JTI4JTI3LnJhdGluZy1iYXItY29udGFpbmVyJTVCZGF0YS1pZCUzRCUyNyUyQiUyOGklMkIxJTI5JTJCJTI3JTVEJTIwLmJhci1udW1iZXIlMjclMjkuaHRtbCUyOHdpZHRoJTVCaSU1RCUyQiUyNyUyNSUyNyUyOSUzQiUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCU3RCUyMGVsc2UlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBqUXVlcnklMjglMjIucmF0aW5nLWJhci1jb250YWluZXIlMjAuYmFyLW51bWJlciUyMiUyOS5odG1sJTI4JTI3MCUyNSUyNyUyOSUwQSUyMCUyMCUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMCU3RCUyOSUzQiUwQSUyMCUyMCUzQyUyRnNjcmlwdCUzRSUwQQ==[/vc_raw_js][vc_raw_html]JTNDc3R5bGUlM0UlMEElMjAlMjAlMjAlMjAucmF0aW5nLWhpc3RvZ3JhbSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMHBhZGRpbmclM0ElMjA1cHglMjA1cHglMjA1cHglMjA0NHB4JTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwdGV4dC1hbGlnbiUzQSUyMGxlZnQlM0IlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjB3aWR0aCUzQSUyMDEwMCUyNSUzQiUwQSUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMC5yYXRpbmctaGlzdG9ncmFtJTIwLnJhdGluZy1iYXItY29udGFpbmVyJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwcG9zaXRpb24lM0ElMjByZWxhdGl2ZSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMG1hcmdpbi1ib3R0b20lM0ElMjA1cHglM0IlMjAlMEElMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjAucmF0aW5nLWhpc3RvZ3JhbSUyMC5iYXItbGFiZWwlMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjBtYXJnaW4tcmlnaHQlM0ElMjAxMHB4JTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwcG9zaXRpb24lM0ElMjBhYnNvbHV0ZSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMGxlZnQlM0ElMjAtNDRweCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMHRvcCUzQSUyMDJweCUzQiUyMCUwQSUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMC5yYXRpbmctaGlzdG9ncmFtJTIwLmJhci1sYWJlbCUzQWJlZm9yZSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMGNvbnRlbnQlM0ElMjAlMjIlNUNmMDA1JTIyJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwZm9udC1mYW1pbHklM0ElMjBGb250QXdlc29tZSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMGZvbnQtc2l6ZSUzQSUyMDE2cHglM0IlMEElMjAlMjAlMjAlMjAlMjAlMjBsaW5lLWhlaWdodCUzQSUyMDE2cHglM0IlMEElMjAlMjAlMjAlMjAlMjAlMjBoZWlnaHQlM0ElMjAxNnB4JTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwd2lkdGglM0ElMjAxNnB4JTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwY29sb3IlM0ElMjAlMjNjY2MlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjBkaXNwbGF5JTNBJTIwaW5saW5lLWJsb2NrJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwbWFyZ2luLXJpZ2h0JTNBJTIwNXB4JTNCJTIwJTBBJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwLnJhdGluZy1oaXN0b2dyYW0lMjAuYmFyJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwYmFja2dyb3VuZC1jb2xvciUzQSUyMCUyMzhlNzBhZiUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMGJhY2tncm91bmQtaW1hZ2UlM0ElMjAtd2Via2l0LWxpbmVhci1ncmFkaWVudCUyOGxlZnQlMkMlMjAlMjM4ZTcwYWYlMkMlMjAlMjM0OGJmZWQlMjklM0IlMEElMjAlMjAlMjAlMjAlMjAlMjBiYWNrZ3JvdW5kLWltYWdlJTNBJTIwbGluZWFyLWdyYWRpZW50JTI4dG8lMjByaWdodCUyQyUyMzhlNzBhZiUyQyUyMCUyMzQ4YmZlZCUyOSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMC13ZWJraXQtdHJhbnNpdGlvbiUzQSUyMHdpZHRoJTIwMnMlMjBlYXNlJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwLW1vei10cmFuc2l0aW9uJTNBJTIwd2lkdGglMjAycyUyMGVhc2UlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjB0cmFuc2l0aW9uJTNBJTIwd2lkdGglMjAycyUyMGVhc2UlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjBvcGFjaXR5JTNBJTIwLjglM0IlMEElMjAlMjAlMjAlMjAlMjAlMjBkaXNwbGF5JTNBJTIwaW5saW5lLWJsb2NrJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwdmVydGljYWwtYWxpZ24lM0ElMjBtaWRkbGUlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjB3aWR0aCUzQSUyMDElMjUlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjBoZWlnaHQlM0ElMjAxNXB4JTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwbWFyZ2luLXJpZ2h0JTNBJTIwM3B4JTNCJTIwJTBBJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwLnJhdGluZy1oaXN0b2dyYW0lMjAuYmFyLW51bWJlciUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMGZvbnQtc2l6ZSUzQSUyMDE0cHglM0IlMEElMjAlMjAlMjAlMjAlMjAlMjBsaW5lLWhlaWdodCUzQSUyMDElM0IlMEElMjAlMjAlMjAlMjAlMjAlMjB2ZXJ0aWNhbC1hbGlnbiUzQSUyMG1pZGRsZSUzQiUyMCUwQSUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMC5oaWRkZW4lN0IlMEElMjAlMjAlMjAlMjAlMjAlMjBkaXNwbGF5JTNBJTIwbm9uZSUzQiUwQSUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUzQyUyRnN0eWxlJTNFJTBB[/vc_raw_html][/vc_column][/vc_row]
Вариант 1 — Простой JS
Используем такой html:
<div class="rating-histogram">
<div class="rating-bar-container five">
<span class="bar-label"> 5 </span>
<span class="bar"></span>
<span class="bar-number"></span>
</div>
<div class="rating-bar-container four">
<span class="bar-label"> 4 </span>
<span class="bar"></span>
<span class="bar-number"></span>
</div>
<div class="rating-bar-container three">
<span class="bar-label"> 3 </span>
<span class="bar"></span>
<span class="bar-number"></span>
</div>
<div class="rating-bar-container two">
<span class="bar-label"> 2 </span>
<span class="bar"></span>
<span class="bar-number"></span>
</div>
<div class="rating-bar-container one">
<span class="bar-label"> 1 </span>
<span class="bar"></span>
<span class="bar-number"></span>
</div>
</div><!-- /rating-histogram -->
<div class="hidden"><!-- needs for jquery calculations -->
<form>
<input type="text" class="reviews_1star" value="5">
<input type="text" class="reviews_2star" value="4">
<input type="text" class="reviews_3star" value="2">
<input type="text" class="reviews_4star" value="6">
<input type="text" class="reviews_5star" value="3">
</form>
</div><!-- /hidden -->
В блоке div.hidden мы выводим количество голосов за каждую оценку, например,
1 балл — 5 голосов,
2 балла — 4 голоса,
3 балла — 2 голоса,
4 балла — 6 голосов,
5 баллов — 3 голоса.
Для WordPress мы можем эти оценки выводить через кастомные поля <?php the_field('reviews_1star'); ?> и т.д., а в HTML это могут быть статические данные, но они обязательно должны быть, потому что используются для подсчета и построения гистограммы.
Используем такой JS:
<script>
$(function() {
var reviews_1star = parseInt($('.reviews_1star').val());
var reviews_2star = parseInt($('.reviews_2star').val());
var reviews_3star = parseInt($('.reviews_3star').val());
var reviews_4star = parseInt($('.reviews_4star').val());
var reviews_5star = parseInt($('.reviews_5star').val());
var sum = reviews_1star + reviews_2star + reviews_3star + reviews_4star + reviews_5star;
var width_1star = (reviews_1star / sum * 100).toFixed(0);
var width_2star = (reviews_2star / sum * 100).toFixed(0);
var width_3star = (reviews_3star / sum * 100).toFixed(0);
var width_4star = (reviews_4star / sum * 100).toFixed(0);
var width_5star = (reviews_5star / sum * 100).toFixed(0);
$('.rating-bar-container.one .bar').css('width', width_1star+'%' );
$('.rating-bar-container.two .bar').css('width', width_2star+'%' )
$('.rating-bar-container.three .bar').css('width', width_3star+'%' );
$('.rating-bar-container.four .bar').css('width', width_4star+'%' );
$('.rating-bar-container.five .bar').css('width', width_5star+'%' );
if (sum > 0) {
$(".rating-bar-container.one .bar-number").html(width_1star+'%');
$(".rating-bar-container.two .bar-number").html(width_2star+'%');
$(".rating-bar-container.three .bar-number").html(width_3star+'%');
$(".rating-bar-container.four .bar-number").html(width_4star+'%');
$(".rating-bar-container.five .bar-number").html(width_5star+'%');
} else{
$(".rating-bar-container .bar-number").html('0%')
}
});
</script>
В head подключаем jquery, если он не подключен:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Используем Такой CSS:
<style>
.rating-histogram {
padding: 5px 5px 5px 44px;
text-align: left;
width: 100%;
}
.rating-histogram .rating-bar-container {
position: relative;
margin-bottom: 5px;
}
.rating-histogram .bar-label {
margin-right: 10px;
position: absolute;
left: -44px;
top: 2px;
}
.rating-histogram .bar-label:before {
content: "\f005";
font-family: FontAwesome;
font-size: 16px;
line-height: 16px;
height: 16px;
width: 16px;
color: #ccc;
display: inline-block;
margin-right: 5px;
}
.rating-histogram .bar {
background-color: #8e70af;
background-image: -webkit-linear-gradient(left, #8e70af, #48bfed);
background-image: linear-gradient(to right,#8e70af, #48bfed);
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
transition: width 2s ease;
opacity: .8;
display: inline-block;
vertical-align: middle;
width: 1%;
height: 15px;
margin-right: 3px;
}
.rating-histogram .bar-number {
font-size: 14px;
line-height: 1;
vertical-align: middle;
}
.hidden{
display: none;
}
</style>
В CSS используется шрифт иконок FontAwesome, он у вас должен быть подключен.
Вариант 2 — Более профессиональный, оптимизирован JS
Меняем HTML на такой формат:
<div class="rating-histogram">
<div class="rating-bar-container five" data-id="5">
<span class="bar-label"> 5 </span>
<span class="bar"></span>
<span class="bar-number"></span>
</div>
<div class="rating-bar-container four" data-id="4">
<span class="bar-label"> 4 </span>
<span class="bar"></span>
<span class="bar-number"></span>
</div>
<div class="rating-bar-container three" data-id="3">
<span class="bar-label"> 3 </span>
<span class="bar"></span>
<span class="bar-number"></span>
</div>
<div class="rating-bar-container two" data-id="2">
<span class="bar-label"> 2 </span>
<span class="bar"></span>
<span class="bar-number"></span>
</div>
<div class="rating-bar-container one" data-id="1">
<span class="bar-label"> 1 </span>
<span class="bar"></span>
<span class="bar-number"></span>
</div>
</div><!-- /rating-histogram -->
<div class="hidden"><!-- needs for jquery calculations -->
<form>
<input type="text" class="reviews_1star" value="5">
<input type="text" class="reviews_2star" value="4">
<input type="text" class="reviews_3star" value="2">
<input type="text" class="reviews_4star" value="6">
<input type="text" class="reviews_5star" value="3">
</form>
</div><!-- /hidden -->
Добавился только параметр data-id для div.rating-bar-container
А JS меняем на такой оптимизированный код:
<script>
$(function() {
var stars = new Array();
var sum = 0;
var width = new Array();
for ( var i = 1; i < 6; i++ ) {
stars.push(parseInt($('.reviews_'+i+'star').val()));
}
for ( var i = 0; i < stars.length; i++ ) {
sum += stars[i];
}
for ( var i = 0; i < stars.length; i++ ) {
w = ((stars[i]) / sum * 100).toFixed(0);
width.push(w);
$('.rating-bar-container[data-id='+(i+1)+'] .bar').css('width', w+'%' );
}
if (sum > 0) {
for ( var i = 0; i < stars.length; i++ ) {
$('.rating-bar-container[data-id='+(i+1)+'] .bar-number').html(width[i]+'%');
}
} else{
$(".rating-bar-container .bar-number").html('0%')
}
});
</script>
CSS остается прежним.
Код на CodePen
See the Pen Animated Rating Histogram by Denis (@deniscreative) on CodePen.
За помощь спасибо Algiz.
Для того, чтобы не прописывать градиенты с вендорными префиксами для каждого элемента, достаточно использовать миксины…
Цель — сделать pop-up окно без использования Fancybox. В общем, его можно сделать даже без…
Суть задачи: На сайте есть несколько вариантов фоновой картинки и несколько вариантов блока модального окна…
Пример реализации красивого чекбокса вместо стандартного. Это простой пример, а визуально оформить сам чекбокс каждый…
