2015-11-03 8 views
2

Я пытаюсь сделать простой дрель, который разбивает месяцы на недели, и я просто пытаюсь заставить первый столбец работать. Я получаю диаграмму для рендеринга, но когда я нажимаю на январь, она не переходит к связанной диаграмме. Внешние ссылки на февраль и марш работают, поэтому я предполагаю, что это проблема с данными JSON.Ссылка не работает с FusionCharts LinkedChart

define(['app'], function (app) { 
app.register.controller('MilesovertimeController', [function() { 
    var vm = this; 

    vm.myDataSource ={ 
     "chart": { 
      "caption": "Miles Over Time", 
      "subCaption": "Track the miles you have run over your entire running career!", 
      "xAxisName": "Time (Month)", 
      "yAxisName": "Miles", 
      "theme": "fint" 
     }, 
     "data": [ 
      { 
       "label": "January", 
       "value": "10", 
       "link": "newchart-json-Jan" 
      }, 
      { 
       "label": "February", 
       "value": "20", 
       "link": "n-http://fusioncharts.com" 
      }, 
      { 
       "label": "March", 
       "value": "5", 
       "link": "n-http://fusioncharts.com" 
      }, 
      { 
       "label": "April", 
       "value": "55", 
       "link": "n-http://fusioncharts.com" 
      }, 
      { 
       "label": "May", 
       "value": "40", 
       "link": "n-http://fusioncharts.com" 
      }, 
      { 
       "label": "June", 
       "value": "110", 
       "link": "n-http://fusioncharts.com" 
      }, 
      { 
       "label": "July", 
       "value": "75", 
       "link": "n-http://fusioncharts.com" 
      }, 
      { 
       "label": "August", 
       "value": "90", 
       "link": "n-http://fusioncharts.com" 
      }, 
      { 
       "label": "September", 
       "value": "10", 
       "link": "n-http://fusioncharts.com" 
      }, 
      { 
       "label": "October", 
       "value": "45", 
       "link": "n-http://fusioncharts.com" 
      }, 
      { 
       "label": "November", 
       "value": "30", 
       "link": "n-http://fusioncharts.com" 
      }, 
      { 
       "label": "December", 
       "value": "100", 
       "link": "n-http://fusioncharts.com" 
      } 
     ], 
     "linkeddata": [ 
      { 
       "id": "Jan", 
       "linkedchart": { 
        "chart": { 
         "caption": "Miles In January", 
         "subcaption": "This is what you did in January", 
         "xAxisName": "Weeks", 
         "yAxisName": "Miles" 
        }, 
        "data": [ 
         { 
          "label": "Week 1", 
          "value": "50" 
         }, 
         { 
          "label": "Week 2", 
          "value": "25" 
         }, 
         { 
          "label": "Week 3", 
          "value": "40" 
         }, 
         { 
          "label": "Week 4", 
          "value": "10" 
         } 
        ] 
       } 
      } 
     ] 
    } 

}]); 
); 

редактировать: Это то, что я пытаюсь подражать http://www.fusioncharts.com/features/linkedcharts-for-drill-down/

ВАЖНО EDIT: Когда я нажимаю января бар я получаю эту ошибку:

Uncaught RuntimeException: #03091456 chartobject-2.render() Error >> Unable to find the container DOM element. 

<div class="container" ng-controller="MilesovertimeController as vm"> 
<div fusionCharts 
    width="1000" 
    height="550" 
    type="column2d" 
    datasource="{{vm.myDataSource}}"> 
</div> 
</div> 
+0

Фактически, ваши данные json недействительны. http://pro.jsonlint.com/. Значение ключа должно быть двойным. '{" key ":" value "}' –

+0

Я не верю, что вам нужно передать имена переменных, такие как «label» как string, когда вы используете angularJS такие ashttp: //www.fusioncharts.com/angularjs-charts/#/demos/ex1 – Xerunix

+0

В приведенный пример содержатся данные json. http://www.fusioncharts.com/features/linkedcharts-for-drill-down/ –

ответ

6

Для того, чтобы получить drill- вниз работы убедитесь, что директива имеет идентификатор

var app = angular.module('myApp', ["ng-fusioncharts"]); 
 
app.controller('MilesovertimeController', [function() { 
 
    var vm = this; 
 

 
    vm.myDataSource ={ 
 
     "chart": { 
 
      "caption": "Miles Over Time", 
 
      "subCaption": "Track the miles you have run over your entire running career!", 
 
      "xAxisName": "Time (Month)", 
 
      "yAxisName": "Miles", 
 
      "theme": "fint" 
 
     }, 
 
     "data": [ 
 
      { 
 
       "label": "January", 
 
       "value": "10", 
 
       "link": "newchart-json-Jan" 
 
      }, 
 
      { 
 
       "label": "February", 
 
       "value": "20", 
 
       "link": "n-http://fusioncharts.com" 
 
      }, 
 
      { 
 
       "label": "March", 
 
       "value": "5", 
 
       "link": "n-http://fusioncharts.com" 
 
      }, 
 
      { 
 
       "label": "April", 
 
       "value": "55", 
 
       "link": "n-http://fusioncharts.com" 
 
      }, 
 
      { 
 
       "label": "May", 
 
       "value": "40", 
 
       "link": "n-http://fusioncharts.com" 
 
      }, 
 
      { 
 
       "label": "June", 
 
       "value": "110", 
 
       "link": "n-http://fusioncharts.com" 
 
      }, 
 
      { 
 
       "label": "July", 
 
       "value": "75", 
 
       "link": "n-http://fusioncharts.com" 
 
      }, 
 
      { 
 
       "label": "August", 
 
       "value": "90", 
 
       "link": "n-http://fusioncharts.com" 
 
      }, 
 
      { 
 
       "label": "September", 
 
       "value": "10", 
 
       "link": "n-http://fusioncharts.com" 
 
      }, 
 
      { 
 
       "label": "October", 
 
       "value": "45", 
 
       "link": "n-http://fusioncharts.com" 
 
      }, 
 
      { 
 
       "label": "November", 
 
       "value": "30", 
 
       "link": "n-http://fusioncharts.com" 
 
      }, 
 
      { 
 
       "label": "December", 
 
       "value": "100", 
 
       "link": "n-http://fusioncharts.com" 
 
      } 
 
     ], 
 
     "linkeddata": [ 
 
      { 
 
       "id": "Jan", 
 
       "linkedchart": { 
 
        "chart": { 
 
         "caption": "Miles In January", 
 
         "subcaption": "This is what you did in January", 
 
         "xAxisName": "Weeks", 
 
         "yAxisName": "Miles" 
 
        }, 
 
        "data": [ 
 
         { 
 
          "label": "Week 1", 
 
          "value": "50" 
 
         }, 
 
         { 
 
          "label": "Week 2", 
 
          "value": "25" 
 
         }, 
 
         { 
 
          "label": "Week 3", 
 
          "value": "40" 
 
         }, 
 
         { 
 
          "label": "Week 4", 
 
          "value": "10" 
 
         } 
 
        ] 
 
       } 
 
      } 
 
     ] 
 
    } 
 

 
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script> 
 
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script> 
 

 

 

 
<div ng-app="myApp"> 
 
    <div class="container" ng-controller="MilesovertimeController as vm"> 
 
    <div fusionCharts 
 
     width="1000" 
 
     height="550" 
 
     id="test" 
 
     type="column2d" 
 
     datasource="{{vm.myDataSource}}"> 
 
    </div> 
 
    </div> 
 
</div>

+0

Отличное решение. –