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

Question 1

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

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

Question 2

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

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

Question 3

Флот

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

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

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

Возможность Flot Zoom.

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

Спарклайны

Ограничения: пирог, линия, полоса, комбинация.

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

Question 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>

Развернуть фрагмент

Question 5

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

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

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

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

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

Question 6

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

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

Question 7

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

https://zoomcharts.com/

Пример графиков:

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

Чем хороша эта библиотека:

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

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

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

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

Question 8

Проверьте TeeChart на наличие Javascript

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