Создание диаграмм с угловыми

Ответ 1

angular-charts - это библиотека, которую я написал для создания диаграмм с angular и D3.

Он инкапсулирует основные диаграммы, которые можно создать с помощью D3 в одной директиве angular. Также он предлагает такие функции, как

• Изменение одного клика;
• Автоматические подсказки;
• Автоматическая настройка на контейнеры;
• Легенды;
• Простой формат данных: только определите, что вы на x и что вам нужно на y;

Существует angular -charts demo.

Ответ 2

Я видел несколько хороших графических решений AngularJS, которые используют Highcharts. Там highcharts-ng директива GitHub упрощает интеграцию с AngularJS и несколько на JSFiddle, чтобы дать вам быстрый вкус того, что возможно.

Вы настроили диаграмму на стороне JS следующим образом:

$scope.chart = {
    options: {
        chart: {
            type: 'bar'
        }
    },
    series: [{
        data: [10, 15, 12, 8, 7]
    }],
    title: {
        text: 'Hello'
    },
    loading: false
}

И затем обратитесь к нему в формате HTML следующим образом:

<highchart id="chart1" config="chart"></highchart>

Предупреждение об использовании/лицензировании: Highcharts доступен бесплатно под лицензией Creative Commons для некоммерческого использования. Если вы ищете варианты построения диаграмм в коммерческом/коммерческом сценарии, вам нужно купить продукт или посмотреть в другом месте.

Ответ 3

Библиотека ZingChart имеет директиву AngularJS, которая была построена внутри компании. Особенности включают:

• Полный доступ ко всей библиотеке ZingChart (все диаграммы, карты и функции)
• Использует Angular двухстороннюю привязку данных, упрощая обновление данных и элементов диаграммы.

• Поддержка команды разработчиков

  ...
  $scope.myJson = {
  type : 'line',
     series : [
        { values : [54,23,34,23,43] },{ values : [10,15,16,20,40] }
     ]
  };
  ...
  
  <zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>
  

Существует полная демонстрация с примерами кода.

Ответ 4

Вы пытались D3.js? Вот хороший пример.

Ответ 5

Я создал директиву angular для xCharts, которая является хорошей библиотекой js-диаграмм http://tenxer.github.io/xcharts/. Вы можете установить его с помощью беседки, довольно просто: https://github.com/radu-cigmaian/ng-xCharts

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

Ответ 6

Чтобы собрать более полезные ресурсы здесь:

Как уже упоминалось ранее, D3.js определенно является лучшей библиотекой визуализации для диаграмм. Чтобы использовать его в AngularJS, я разработал angular-chart. Это простая в использовании директива, которая соединяет D3.js с AngularJS 2-Way-DataBinding. Таким образом, диаграмма автоматически обновляется при изменении параметров конфигурации, и в то же время диаграммы сохраняют свое состояние (уровень масштабирования,...), чтобы сделать его доступным в мире AngularJS.

Ознакомьтесь с примерами, чтобы убедиться.

Ответ 7

Плагин диаграммы AngularJS вместе с библиотекой FusionCharts для добавления интерактивных графиков и диаграмм JavaScript в ваши веб-приложения или мобильные приложения - с помощью всего одной директивы. Ссылка: http://www.fusioncharts.com/angularjs-charts/#/demos/ex1