Если нет возможности использовать преимущества масштабируемой векторной графики html-5 (Windows XP, IE 8), если нет желания использовать громоздкие внешние графические библиотеки, если хочеться построить круговую диаграмму или график с заполнением - воспользуемся возможностями обычного html.

Круговая диаграмма:

• Берём:
• набор изображений равнобедренных прямоугольных треугольников, с прозрачным фоном, небольшого размера (128 х 128), в формате png - по четыре для каждого цвета диаграммы;
• набор изображений, размером в один пиксел, в формате png - по одному для каждого цвета диаграммы;
• набор чисел для отображения их соотношения в виде круговой диаграммы;
• квадратную маску (1024 х 1024) цвета фона с круглой прозрачной дыркой по средине.
• Получаем:
• заготовки секторов круговой диаграммы - путем изменения ширины или высоты изображений треугольников;
• фоновые заполнители секторов круговой диаграммы - путем масштабирования однопиксельных изображений;
• квадратную диаграмму - путем наложения заготовок секторов на фоновые заполнители;
• круговую диаграмму - путем наложения на квадратную диаграмму маски.

График с заполнением:

• Берём:
• набор изображений равнобедренных прямоугольных треугольников, с прозрачным фоном, небольшого размера (128 х 128), в формате png - по четыре для каждого цвета графика;
• набор изображений, размером в один пиксел, в формате png - по одному для каждого цвета графика;
• функцию для отображения.
• Получаем:
• гистограмму, составленную из прямоугольников - путем масштабирования однопиксельных изображений;
• график с заполнением - путем размещения изображений треугольников непосредственно над прямоугольниками, образовавшими гистограмму, и изменения высоты изображений треугольников.