сделать увеличение с помощью nvd3

Мне нужно сделать увеличенное изображение. Я использую угловые js и nvd3. это часть моего кода, HTML и угловой модуль:сделать увеличение с помощью nvd3

var app = angular.module('DL', ['nvd3']); 
 

 
app.controller('daCtrl', function($scope) { 
 
    
 
$scope.graphic = [{key: "a", values: [[243434, 1],[363352, 2],...]}, [[243434, 1],[363352, 2],...]},... ]; 
 

 
    $scope.options = { 
 
        chart: { 
 
         type: "lineChart", 
 
         height: 450, 
 
         margin : { 
 
          top: 20, 
 
          right: 20, 
 
          bottom: 60, 
 
          left: 65 
 
         }, 
 
         x: function(d){ return d[0]; }, 
 
         y: function(d){ return d[1]/100; }, 
 
         average: function(d) { return d.mean/100; }, 
 

 
         color: d3.scale.category10().range(), 
 
         transitionDuration: 300, 
 
         useInteractiveGuideline: true, 
 
         clipVoronoi: false, 
 

 
         xAxis: { 
 
          axisLabel: 'Date', 
 
          tickFormat: function(d) { 
 
           return d3.time.format('%m/%d/%y')(new Date(d)); 
 
          } 
 
         }, 
 

 
         yAxis: { 
 
          axisLabel: 'Measure', 
 
          tickFormat: function(d){ 
 
           return d3.format('.02f')(d); 
 
          }, 
 
          axisLabelDistance: 20, 
 
          showMaxMin: true, 
 
          staggerLabels: true 
 
         } 
 

 
        } 
 
       }; 
 
    });

<link rel="stylesheet" type="text/css" href="../bower_components/nvd3/nv.d3.css"> 
 

 
<script src="../bower_components/d3/d3.js"></script> 
 
<script src="../bower_components/nvd3/nv.d3.js"></script> 
 
<script src="../bower_components/angular-nvd3/dist/angular-nvd3.js"></script> 
 

 
<nvd3 options="options" data="graphic"></nvd3>

Графика в порядке, но мне нужно сделать масштабирование над графикой. Я видел, что D3 можно, но если вы не можете с одинаково nvd3

источник

2015-06-16 maikelm

Я изменил nvd3 с использованием dygraph Dygraphs angularjs директиву (https://twittstrap.com/dygraphs-angularjs-directive/) Сейчас: график <нг-dygraphs данных = "graph.data" варианты "= .options "legend =" graph.legend "> – maikelm

Попробуйте использовать строкуWithFocusChart вместо lineChart, а затем добавьте эти параметры в свою диаграмму:

    x2Axis: { 
         tickFormat: function (d) { 
          return d3.time.format('%m/%d/%y')(new Date(d)); 
         } 
        }, 
        y2Axis: { 
         tickFormat: function(d){ 
           return d3.format('.02f')(d); 
          } 
        }

источник

2017-10-18 08:36:45

-1

Я изменил nvd3 к dygraph с использованием Dygraphs angularjs Директиву (https://twittstrap.com/dygraphs-angularjs-directive/)

Теперь (тот же самый пример веб-сайта)

HTML:

<head> 
 
    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
 
    <script src="bower_components/dygraphs/dygraph-combined.js"></script> 
 
    <script src="bower_components/angular/angular.min.js"></script> 
 
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 
 
    <script src="bower_components/moment/moment.js"></script> 
 
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
 
    <script src="bower_components/angular-dygraphs/src/angular-dygraphs.js"></script> 
 

 
    <!--<link rel="stylesheet" type="text/css" href="bower_components/angular-dygraphs/demo/demo.css"/>--> 
 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> 
 
</head> 
 
<body ng-app="demoApp"> 
 
<div ng-controller="DemoCtrl"> 
 
    <ng-dygraphs data="graph.data" options="graph.options" legend="graph.legend"></ng-dygraphs> 
 
<div> 
 
</body>

ЯШ:

var example = angular.module('demoApp', [ 
 
     "angular-dygraphs" 
 
    ]); 
 

 
    demoApp.controller('DemoCtrl', function ($scope) { 
 
     $scope.graph = { 
 
      data: [ 
 
      ], 
 
      options: { 
 
       labels: ["x", "A", "B"] 
 
      }, 
 
      legend: { 
 
       series: { 
 
        A: { 
 
         label: "Series A" 
 
        }, 
 
        B: { 
 
         label: "Series B", 
 
         format: 3 
 
        } 
 
       } 
 
      } 
 
     }; 
 

 
     var base_time = Date.parse("2008/07/01"); 
 
     var num = 24 * 0.25 * 365; 
 
     for (var i = 0; i < num; i++) { 
 
      $scope.graph.data.push([ new Date(base_time + i * 3600 * 1000), 
 
       i + 50 * (i % 60),  // line 
 
       i * (num - i) * 4.0/num // parabola 
 
      ]); 
 
     } 
 
     
 
    });

источник

2015-06-18 16:32:27 maikelm

, который не является решением углового nvd3, хотя – Regenschein

Я не нашел решения для увеличения в nvd3, поэтому я переключился на использование dygraph. Вместо того, чтобы отвечать на мой собственный вопрос, я решил поделиться своим решением. – maikelm

Посмотрите, помогает ли мой ответ –

Я знаю, что я два года опоздал на вечеринку, но масштабирование angularjs полностью вещь, просто добавить что-то вроде:

zoom: { 
    enabled: true, 
    scaleExtent: [1, 10000], 
    useFixedDomain: false, 
    useNiceScale: false, 
    horizontalOff: false, 
    verticalOff: true, 
    unzoomEventType: "dblclick.zoom" 
}

Для ваших вариантов диаграммы

источник

2017-02-27 17:44:19

Просто fyi to googlers, не все диаграммы поддерживают функцию масштабирования. то есть 'multiBarChart' не изменяется вообще при добавлении ключа масштабирования – Felipe

ответ

Смежные вопросы