Суббота, 17 августа 2013 00:00

Chart.js для вашего сайта

Оцените материал
(0 голосов)

 

Этот скрипт дает вам возможность эффектно показать на вашем сайте некий график, некое процентное соотношение; иллюстрирующее, скажем, все увеличивающийся и поистине неиссякаемый приток новых клиентов в вашей компании... долю внешних инвестиций... процент выигранных юридических споров... график инновационных свершений в зависимости от времени года... ну или просто рост доходов ваших клиентов, неуклонный и всепоглощающий. Почему бы и нет? Разница определяется только лишь пределами вашей фантазии.

 

Разработка сайтов

 

Сказано - сделано. Качаем плагин со страницы проекта (заодно любуемся несколькими вариантами демок и выбираем для себя то, что наиболее понравилось). Собственно, инструкции замечательно несложны: вам понадобятся всего лишь два файла - Chart.js и Chart.min.js , ну и еще - разместить на страничке вашего сайта вот такой примерно код, в котором не забываем правильно указать путь к директории с двумя полученными скриптами (самая первая строчка):

 

<script src="/vash_katalog_s_fajlami/Chart.js"></script>
<style>
canvas{
}
</style>
<canvas id="canvas" height="250" width="250"></canvas>
<script>
var pieData = [
{
value: 50,
color:"#006633"
},
{
value: 15,
color:"#660033"
},
{
value : 5,
color : "#000000"
},
{
value : 100,
color : "#0066CC"
}
];
var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);
</script>

 

 

Да, это практически все. Измените в приведенном коде размеры чарта (height и width), перепропишите цвета, их количество и процентное соотношение на графике; все очень несложно. Enjoy!

Последнее изменениеВторник, 25 октября 2016 02:15

Оставить комментарий

Добавьте ваш комментарий