2009-09-24 2 views
5

Я ищу простой и удобный для интеграции график для отображения статистики продаж в веб-приложении.Быстрый и легкий график PHP/Javascript

В основном я поставлю его название месяца и числовое количество продаж в этом месяце. Я бы хотел, чтобы он отобразил график, показывающий статистику.

Какое оптимальное решение для этого? Я бы предпочел что-то привлекательное, но все же легко интегрировать.

ответ

7

Google Charts. Для этого есть несколько оберток для PHP:

+1

Несколько больше добавить к списку: http://pchart.sourceforge.net/ http://teethgrinder.co.uk/open-flash-chart-2/ –

+0

@Phill: это не те для графиков Google. Я только перечислил обложки Google Charts. – cletus

2

Вы можете использовать плагин jQuery visualize, это настраиваемый и простой в использовании компонент, поэтому он использует элемент html, поэтому вам нужно будет проверить совместимость браузера.

jQuery Visualize

1

Лучшее и самое простое решение было бы использовать amCharts (http://amcharts.com/). Это вспышка (возможно, не то, что вы ищете), но это всегда было бы моим выбором.

1

Если вам не нужен очень сложный график, вы можете нарисовать простую гистограмму с помощью простого HTML-кода. Я видел, как дизайнеры интерфейса делают эту технику очень впечатляющей.

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

В качестве простого примера того, что я имею в виду:

<html> 
    <body> 
    <div width="100%"> 
     <div style="float:left; width:70px">Jan</div> 
     <div style="background: #0A0; width: 300px; margin-left:70px" >$300</div> 
    </div> 
    <div width="100%"> 
     <div style="float:left; width:70px">Feb</div> 
     <div style="background: #A00; width: 122px; margin-left:70px" >$122</div> 
    </div> 
    <div width="100%"> 
     <div style="float:left; width:70px">Mar</div> 
     <div style="background: #00A; width: 421px; margin-left:70px" >$421</div> 
    </div> 
    <div width="100%"> 
     <div style="float:left; width:70px">Apr</div> 
     <div style="background: #0AA; width: 17px; margin-left:70px" >$17</div> 
    </div> 
    </body> 
</html>