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


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

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

7 92

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/

пример диаграммы:

interactive pie chart

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

Что круто в этой lib:

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

enter image description here

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

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

enter image description here

диаграммы поставляются с обширным 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 и др...

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

  • скриншоты некоторых демо:

TeeChart Javascript - Bars

TeeChart Javascript - Pie

TeeChart Javascript - Points