Делаем динамическую гистограмму с использованием JS и jQuery

HTML
14 января 2017

[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.

Предыдущие статьи

Добавляем градиент в sass через миксины или с помощью bourbon

Для того, чтобы не прописывать градиенты с вендорными префиксами для каждого элемента, достаточно использовать миксины…

Делаем попап без плагина fancybox

Цель — сделать pop-up окно без использования Fancybox. В общем, его можно сделать даже без…

Делаем на сайте случайные картинки для фона и для некоторых элементов

Суть задачи: На сайте есть несколько вариантов фоновой картинки и несколько вариантов блока модального окна…

Делаем красивые чекбоксы

Пример реализации красивого чекбокса вместо стандартного. Это простой пример, а визуально оформить сам чекбокс каждый…

Ответить

OK

Ваше сообщение успешно отправлено

Я свяжусь с Вами, если будет необходимо

Ок