Круговая диаграмма с jQuery
Я хочу создать круговую диаграмму в JavaScript. При поиске я нашел API Google Charts. Так как мы используем jQuery я обнаружил, что есть интеграция jQuery для Google Charts доступен.
но моя проблема здесь фактические данные отправляются на сервер Google для создания диаграмм. Есть ли способ предотвратить отправку данных в Google? Я обеспокоен отправкой своих данных третьей стороне.
7 ответов:
jqPlot выглядит довольно хорошо, и это с открытым исходным кодом.
вот ссылка на самые впечатляющие и современные примеры jqPlot.
Flot
ограничения: линии, точки, заполненные области, бары, пирог и их комбинации
С точки зрения взаимодействия, Flot на сегодняшний день поможет вам как можно ближе к Flash graphing, как вы можете получить с
jQuery
. В то время как вывод графика довольно гладкий и красивый, вы также можете взаимодействовать с точками данных. Я имею в виду, что вы можете иметь возможность наводить курсор на точку данных и получать визуальную обратную связь о значении этой точки в диаграмма.Магистральная версия flot поддерживает круговые диаграммы.
Flot возможность масштабирования.
кроме того, у вас также есть возможность выбрать кусок графика, чтобы получить данные обратно для конкретной "зоны". В качестве дополнительной функции к этому "зонированию" вы также можете выбрать область на графике и увеличить масштаб, чтобы увидеть точки данных немного ближе. очень круто.
спарклайны
Ограничения: Пирог, Линия, Бар, Комбинация
Sparklines-мой любимый мини-графический инструмент. Действительно отлично подходит для графиков стиля приборной панели (подумайте Google Analytics dashboard в следующий раз при входе в систему). Поскольку они такие крошечные, их можно включить в строку (как в примере выше). Еще одна хорошая идея, которая может быть использована во всех графических плагинов является возможность самообновления. Их демонстрация скорости мыши показывает вам силу живого графика в лучшем виде.
Запрос График 0.21
ограничения: площадь, линия, Бар и их комбинации
jQuery Chart 0.21-это не самый красивый графический плагин, о котором нужно сказать. Он довольно прост в функциональности, когда речь заходит о диаграммах, которые он может обрабатывать, однако он может быть гибким, если вы можете вложить в него некоторое время и усилия.
добавление значений в диаграмме относительно просто:
.chartAdd({ "label" : "Leads", "type" : "Line", "color" : "#008800", "values" : ["100","124","222","44","123","23","99"] });
jQchart
Ограничения: Бар, Линия
jQchart-странный, они встроили в анимацию транзисторы и функции перетаскивания/перетаскивания в диаграмму, однако это немного неуклюже – и, казалось бы, бессмысленно. Он генерирует красивые диаграммы, если вы получаете
CSS
настройка правильная,но там лучше.
TufteGraph
Ограничения: Бар и Штабелированный бар
Tuftegraph продает себя как "красивые гистограммы, которые вы бы показали своей матери". Он приближается, Flot красивее, но Tufte действительно поддается очень легкому весу. Хотя с этим приходят ограничения-есть несколько вариантов на выбор, так что вы получите то, что вам дано. Проверьте это для быстрого выигрыша гистограммы.
на поле появился новый игрок, предлагающий продвинутые интерактивные HTMl5 графики:
http://datavisualizationsoftwarelab.com/en/products/pie-chart/
пример диаграммы:
документация:http://developers.dvsl.co/en/pie-chart/
Что круто в этой lib:
- другие ломтики могут быть расширены
- пирог предлагает детализировать для иерархических структур (см. Пример)
- написать свой собственный контроллер источника данных легко, или обеспечить простой файл json
- экспорт изображений с высоким разрешением из коробки
- полное touch поддержка, работает плавно на iPad, iPhone, android и т. д.
диаграммы свободный для некоммерческого использования, коммерческих лицензий и технической поддержки доступен что ж.
также интерактивные графики времени и чистые диаграммы есть для вас, чтобы использовать.
диаграммы поставляются с обширным API и настройками, так что вы можете контролировать каждый аспект диаграмм.
тонны отличных предложений здесь, просто собираюсь бросить ZingChart в стек для хорошей мерой. Мы недавно выпустили jQuery wrapper для библиотеки, что делает его еще легче строить и настраивать диаграммы. Ссылки 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>
несколько других, которые не были упомянуты:
для мини-пирогов, линий и баров,Peity блестящий, простой, крошечный, быстрый, использует действительно элегантную разметку.
Я не уверен, что это отношения с Flot (учитывая его имя), но Flotr2 довольно хорошо, конечно, делает лучше пироги, чем Flot.
блефовать производит красивые линейные графики, но у меня было немного проблем с его пирогами.
Не то, что я был после, но другой коммерческий продукт (так же, как Highcharts) является TeeChart.
диаграмма.js весьма полезно, поддерживая множество других типов диаграмм, а также.
Он может использоваться как с jQuery, так и без него.
Регистрация TeeChart для Javascript
бесплатная для некоммерческого использования.
включает в себя плагины для jQuery узел.js, WordPress, Drupal,Joomla, Microsoft TypeScript и др...
скриншоты некоторых демо: