Круговая диаграмма с jQuery

Я хочу создать круговую диаграмму в JavaScript. При поиске я нашел API графиков Google. Поскольку мы используем jQuery, я обнаружил, что существует интеграция jQuery для графиков Google.

Но моя проблема заключается в том, что фактические данные отправляются на сервер Google для создания диаграмм. Есть ли способ предотвратить отправку данных в Google? Меня беспокоит отправка моих данных третьему лицу.

Ответ 1

jqPlot выглядит неплохо, и это с открытым исходным кодом.

Вот ссылка на самые впечатляющие и обновленные примеры jqPlot.

Ответ 2

Flot

Ограничения: линии, точки, заполненные области, столбцы, пирог и комбинации этих

С точки зрения взаимодействия, Флот, безусловно, приблизит вас к графике Flash, как можно ближе к jQuery. Несмотря на то, что вывод графика довольно гладкий и великолепно выглядящий, вы также можете взаимодействовать с точками данных. Я имею в виду, что вы можете иметь возможность навести курсор на точку данных и получить визуальную обратную связь от значения этой точки на графике.

Версия trunk для флота поддерживает круговые диаграммы.

Возможность масштабирования флота.

Кроме того, у вас также есть возможность выбрать фрагмент графика, чтобы вернуть данные для определенной "зоны". В качестве дополнительной функции для этого "зонирования" вы также можете выбрать область на графике и увеличить масштаб, чтобы увидеть точки данных немного ближе. Очень круто.

Sparklines

Ограничения: Pie, Line, Bar, Combination

Sparklines - мой любимый мини-графический инструмент. Действительно отлично подходит для графиков стиля панели инструментов (подумайте о панели инструментов Google Analytics при следующем входе в систему). Поскольку theyre настолько крошечный, они могут быть включены в строку (как в примере выше). Еще одна приятная идея, которая может использоваться во всех графических плагинах, - это возможности самообновления. Их демо-версия Mouse-Speed показывает вам мощь живого графика в лучшем виде.

Диаграмма запросов 0.21

Ограничения: Area, Line, Bar и комбинации этих

Диаграмма jQuery 0.21 - это не самый красивый плагин для построения диаграмм, там он должен быть указан. Его довольно простой в функциональности, когда дело доходит до графиков, которые он может обрабатывать, однако он может быть гибким, если вы можете потратить некоторое время и усилия на него.

Добавление значений в диаграмму относительно просто:

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart

Ограничения: Бар, Линия

jQchart является нечетным, они встроены в анимационные транзисторы и функции перетаскивания в диаграмму, однако его немного неуклюжие - и, казалось бы, бессмысленные. Он генерирует красивые диаграммы, если вы правильно настроите CSS, но там лучше.

TufteGraph

Ограничения: Bar и Stacked Bar

Tuftegraph продает себя как "красивые гистограммы, которые вы покажете своей матери". Он приближается, Флот красивее, но Tufte делает себя очень легким. Хотя с этим и заканчиваются ограничения - есть несколько вариантов выбора, так что вы получаете то, что вы указали. Посмотрите на карту быстрого выигрыша.

Ответ 3

В поле появился новый игрок, предлагающий передовые интерактивные графики HTMl5:

http://datavisualizationsoftwarelab.com/en/products/pie-chart/

Пример диаграмм:

Документация: http://developers.dvsl.co/en/pie-chart/

Что круто об этом lib:

Другие фрагменты можно развернуть
Pie предлагает сверлить иерархические структуры (см. пример)
легко написать собственный контроллер источника данных или предоставить простой json файл
экспорт изображений с высоким разрешением из коробки.
полная поддержка touch, работает плавно на iPad, iPhone, android и т.д.

Графики бесплатно для некоммерческого использования, коммерческие лицензии и техническая поддержка также доступны.

Также вам помогут интерактивные временные диаграммы и чистые диаграммы.

Графики поставляются с обширными API и настройками, поэтому вы можете контролировать каждый аспект диаграмм.

Ответ 4

Тонны замечательных предложений здесь, просто собираются бросить ZingChart в стек для хорошей оценки. Недавно мы выпустили обертка jQuery для библиотеки, которая упрощает сбор и настройку диаграмм. Ссылки CDN находятся в демо ниже.

Я нахожусь в команде ZingChart, и мы здесь, чтобы ответить на любые вопросы, которые могут возникнуть у вас!

$('#pie-chart').zingchart({
  "data": {
    "type": "pie",
    "legend": {},
    "series": [{
      "values": [5]
    }, {
      "values": [10]
    }, {
      "values": [15]
    }]
  }
});

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>

<div id="pie-chart"></div>

Ответ 5

Несколько других, которые не были упомянуты:

Для мини-пирогов, линий и баров Peity является блестящим, простым, крошечным, быстрым, использует действительно элегантную разметку.

Я не уверен в этом отношении с Flot (учитывая его название), но Flotr2 довольно неплохо, конечно, лучше делает пироги чем Флот.

Bluff создает красивые графические диаграммы, но у меня были проблемы со своими пирогами.

Не то, что мне было, но еще один коммерческий продукт (как и Highcharts) - TeeChart.

Ответ 6

Chart.js весьма полезен, поддерживая также множество других типов диаграмм.

Он может использоваться как с jQuery, так и без него.

Ответ 7

Отметьте TeeChart для Javascript

Бесплатно для некоммерческого использования.
Включает плагины для jQuery, Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript и т.д.
Интерактивные демонстрации здесь и здесь.
Некоторые скриншоты некоторых демонстраций: