AngularJS Chart

Я использую Angular Chart для создания шести диаграмм (баров & строк) на веб-сайте с различными мерами.AngularJS Chart

Так я пытаюсь получить тип диаграммы из файла JSON и загрузить его в класс холста, но это не работает:

{ 
    "modules": [{ 
     "name": "Chart1", 
     "color": "color:red;", 
     "type": "chart-bar", 
     "series": "SeriesA", 
     "daten": [["90", "99", "20", "21", "26", "75", "60", "67", "59", "55"]], 
     "labels": ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10"], 
     "colours": [{ 
      "fillColor": "rgba(224, 108, 112, 1)", 
      "strokeColor": "rgba(207,100,103,1)", 
      "pointColor": "rgba(220,220,220,1)", 
      "pointStrokeColor": "#fff", 
      "pointHighlightFill": "#fff", 
      "pointHighlightStroke": "rgba(151,187,205,0.8)" 
     }] 
    }] 
} 

<div class="graph-display" ng-controller="jsonServerBox"> 
    <div class="bar-chart-box" ng-repeat="module in ocw.modules" width="100px"><div style="{{module.color}}">{{module.name}} </div>  
     <canvas class="{{module.type}}" data="module.daten" labels="module.labels" series="module.series"></canvas> 
    </div> 
</div>

Может кто-нибудь помочь мне решить это?

кстати: без {{}} он не работает как хорошо

источник

2015-11-25 SaSH_17

Вы добавили chart.js зависимость в модуле. var app = angular.module ("Bar_Chart", ["chart.js"]); –

Да, модуль доступен. Поэтому, когда я изменяю класс canvas на «class = 'chart-bar», тогда его работа отлично. Но я не хочу повторять класс холста шесть раз ... –

Посмотрите на этот https://github.com/jtblin/angular-chart.js/blob/master/angular-chart.js. Класс «chart-bar» используется для определения того, какой тип диаграммы необходимо нарисовать. Обсуждение можно найти здесь. https://github.com/jtblin/angular-chart.js/issues/165 Итак, вам нужно пройти этот класс, чтобы понять угловую диаграмму, какой тип диаграммы ему нужен для построения. –

Это решение - изменить элемент холста следующим образом:

"modules": [{ 
       "name": "Chart1", 
       "color": "color:red;", 
       "type": "Line", 
       "series": "SeriesA", 
       "daten": [["90", "99", "20", "21", "26", "75", "60", "67", "59", "55"]], 
       "labels": ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10"], 
       "colours": [{ 
        "fillColor": "rgba(224, 108, 112, 1)", 
        "strokeColor": "rgba(207,100,103,1)", 
        "pointColor": "rgba(220,220,220,1)", 
        "pointStrokeColor": "#fff", 
        "pointHighlightFill": "#fff", 
        "pointHighlightStroke": "rgba(151,187,205,0.8)" 
       }] 

<div style="height:400px;width:400px;"> 
<div class="graph-display" ng-controller="jsonServerBox"> 
    <div class="bar-chart-box" ng-repeat="module in ocw.modules" width="100px"><div style="{{module.color}}">{{module.name}} </div>  
     <canvas id="base" class="chart chart-base" chart-type="module.type" chart-data="module.daten" chart-labels="module.labels" chart-series="module.series"></canvas> 
    </div> 
</div>

источник

2015-11-25 14:28:18

AngularJS Chart

ответ

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