Круговая диаграмма с JQuery - PullRequest
92 голосов
/ 03 августа 2009

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

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

Ответы [ 7 ]

97 голосов
/ 03 августа 2009

Flot

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

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

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

Flot Zoom.

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


Sparklines

Ограничения: Пирог, Линия, Бар, Комбинация

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


Диаграмма запросов 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 позиционирует себя как «красивые гистограммы, которые вы бы показали своей маме». Это близко, Флот красивее, но Туфте поддается очень легкому весу. Хотя с этим связаны ограничения - есть несколько вариантов на выбор, поэтому вы получаете то, что вам дают. Посмотрите на гистограмму быстрого выигрыша.

47 голосов
/ 16 июня 2011

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

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

5 голосов
/ 23 марта 2015

Тонн замечательных предложений здесь, просто собираюсь выбросить 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>
4 голосов
/ 12 декабря 2013

На поле появился новый игрок, предлагающий расширенные навигационные карты, использующие Canvas для сверхгладкой анимации и производительности:

https://zoomcharts.com/

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

interactive pie chart

Документация: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

Что хорошего в этой библиотеке:

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

enter image description here

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

Также вы можете использовать интерактивные графики времени и сетевые графики. enter image description here

enter image description here

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

4 голосов
/ 13 декабря 2012

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

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

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

Блеф создает симпатичные линейные графики, но у меня были небольшие проблемы с его пирогами.

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

3 голосов
/ 27 апреля 2013

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

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

0 голосов
/ 02 сентября 2015

Проверка TeeChart для Javascript

  • Бесплатно для некоммерческого использования.

  • Включает плагины для jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript и т. Д.

  • Интерактивные демонстрации здесь и здесь .

  • Некоторые скриншоты некоторых демонстраций:

TeeChart Javascript - Bars

TeeChart Javascript - Pie

TeeChart Javascript - Points

...