Я хочу створити кругову діаграму в JavaScript. Під час пошуку я знайшов API Google Charts. Оскільки ми використовуємо jQuery, я виявив, що доступна інтеграція jQuery для Google Charts .

Але моя проблема полягає в тому, що фактичні дані надсилаються на сервер Google для створення діаграм. Чи є спосіб запобігти надсиланню даних до Google? Я стурбований тим, що надсилаю свої дані третій стороні.

jqPlot виглядає досить добре, і він є відкритим кодом.

Ось посилання на найбільш вражаючі та найсучасніші приклади jqPlot .

Флот

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

З точки зору взаємодії, Flot на сьогоднішній день надасть вам максимально наблизитись до Flash-графіки, наскільки це можливо jQuery. Незважаючи на те, що вихідний графік досить гладкий і чудовий, ви також можете взаємодіяти з точками даних. Я маю на увазі під цим, що ти можеш мати можливість навести курсор на точку даних та отримати візуальний зворотній зв'язок щодо значення цієї точки на графіку.

Версія для стволів flot підтримує кругові діаграми.

Можливість масштабування плоттю

Крім цього, ви також маєте можливість вибрати фрагмент графіка, щоб повернути дані для певної "зони". В якості другої функції цього "зонування" ви також можете вибрати область на графіку та збільшити масштаб, щоб трохи ближче переглянути точки даних. Дуже круто .

Іскрові лінії

Обмеження: пиріг, лінія, брусок, комбінація

Sparklines - це мій улюблений міні-графічний інструмент там. Дійсно чудово підходить для графіків стилю інформаційної панелі (подумайте, що приладна панель Google Analytics наступного разу після входу в систему). Оскільки вони такі маленькі, їх можна включити в рядок (як у прикладі вище). Ще одна приємна ідея, яку можна використовувати у всіх графічних плагінах, - це можливості самооновлення. Їх демонстрація швидкості миші демонструє вам найкращу силу живих графіків.

Діаграма запитів 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 продає себе як "гарні графіки, які ви б показали своїй матері". Підійде близько, Флот гарніший, але Туфте справді дуже легкий. Хоча при цьому виникають обмеження - є кілька варіантів на вибір, щоб ви отримали те, що вам дано. Перевірте це на швидкій діаграмі виграшу.

Тут багато чудових пропозицій, просто збираюся кинути 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>

Кілька інших, які не були згадані:

Для міні-пирогів, ліній та барів Peity - це геніально, просто, крихітно, швидко, використовує дійсно елегантну розмітку.

Я не впевнений, що це стосунки з Флотом (дано його ім'я), але Flotr2 досить хороший, звичайно, краще пиріжків, ніж Флот.

Блеф випускає красиві лінійні графіки, але у мене були проблеми з його пирогами.

Не те, про що я пішов, але ще один комерційний продукт (як і Highcharts) - це TeeChart .

Chart.js досить корисний, підтримуючи також численні інші типи діаграм.

Його можна використовувати як з jQuery, так і без нього.

У полі є новий програвач, який пропонує вдосконалені навігаційні карти, які використовують Canvas для надзвичайно плавної анімації та продуктивності:

https://zoomcharts.com/

Приклад діаграм:

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

Що круто в цій бібліотеці:

• Інші фрагменти можна розширити
• Пиріг пропонує деталізацію для ієрархічних структур (див. Приклад)
• легко написати власний контролер джерела даних або надати простий файл json
• експортувати зображення високої роздільної здатності з коробки
• повна підтримка на дотик , плавно працює на iPad, iPhone, android тощо.

Діаграми безкоштовні для некомерційного використання, комерційних ліцензій та технічної підтримки.

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

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

Перевірте TeeChart на Javascript

• Безкоштовно для некомерційного використання.

• Включає плагіни для jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript тощо ...

• Інтерактивні демонстрації тут і тут .

• Деякі скріншоти деяких демонстраційних демонстрацій: