Думаю мало кому нравиться искать, скачивать тяжелые готовые js библиотеки для того чтобы нарисовать небольшую диаграмму… Вот и мне этот вариант не особо понравился. Так и родилась тема этого поста.

Итак чтоб нарисовать вот такую диаграмму нам потребуется совсем немного знаний и пол часа свободного времени. Использовать будем элемент html 5 canvas и библиотеку которая поможет нашему скрипту работать в недобраузерах IE – http://explorercanvas.googlecode.com/svn/trunk/excanvas.js

Разместим на странице элемент canvas.

<canvas  id="chart" width="200" height="200"></canvas>

Cкрипт который нарисует в данном элементе диаграмму тоже очень простой

var drawingCanvas = document.getElementById('chart');
if(drawingCanvas && drawingCanvas.getContext) {
  var context = drawingCanvas.getContext('2d');
  // рисуем окружность
  context.fillStyle = "#ddd";
  context.strokeStyle = "#ddd";
  context.beginPath();
  context.arc(100,100,86,0,Math.PI*2,true);
  context.closePath();
  context.fill();
 
  // рисуем сектор окружности num%
  context.fillStyle = "#ffb549";
  context.beginPath();
  context.moveTo(100, 100);
  //координаты старта определяем так чтоб закрашенная область всегда была снизу
  var start=(Math.PI/180)*90-((Math.PI/180)*num*360/100)/2
  context.arc(100,100,86,start,start+(Math.PI/180)*num*360/100,false);
  context.closePath();
  context.fill();
 
  // закрашиваем внутреннюю окружность меньшего радиуса
  context.fillStyle = "#F8F8F8";
  context.beginPath();
  context.arc(100,100,54,0,Math.PI*2,true);
  context.closePath();
  context.fill();
 
  // пишем текст
  context.fillStyle = "#000000";
  context.font = "20pt Tahoma";
  context.textAlign = "center";
  context.textBaseline = 'middle';
  var x=drawingCanvas.width/2;
  var y=drawingCanvas.height/2;
  context.fillText(num+"%", x,y);
}

Пример

Добавлено: 12 Сентября 2013 04:55:18 Добавил: Андрей Ковальчук Нравится 0

Добавить