AngularJS Chart

Question

AngularJS Chart

0

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

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

{
    "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>

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

btw: без {{}} это не сработало

SaSH_17 25 нояб. 2015, в 13:22

Источник

0

Вы добавили в свой модуль зависимость chart.js? var app = angular.module ("Bar_Chart", ["chart.js"]);
J-D 25 нояб. 2015, в 11:56
0

Да, модуль доступен - поэтому, когда я изменяю класс холста на "class = 'chart-bar'", тогда он работает нормально. Но я не хочу повторять урок холста шесть раз ...
SaSH_17 25 нояб. 2015, в 12:02
1

Взгляните на этот github.com/jtblin/angular-chart.js/blob/master/angular-chart.js . Класс «диаграмма-бар» используется для определения того, какой тип диаграммы нужно рисовать. Обсуждение можно найти здесь. github.com/jtblin/angular-chart.js/issues/165 Таким образом, вы должны пройти этот класс, чтобы понять угловую диаграмму, какой тип диаграммы ей нужно построить.
J-D 25 нояб. 2015, в 12:18
0

спасибо за ссылки - мне помогло решение (см. ниже)
SaSH_17 25 нояб. 2015, в 14:29

Показать ещё 2 комментария

Теги:

javascript

angularjs

charts

1 ответ

Ещё вопросы

Вы добавили в свой модуль зависимость chart.js? var app = angular.module ("Bar_Chart", ["chart.js"]);
Да, модуль доступен - поэтому, когда я изменяю класс холста на "class = 'chart-bar'", тогда он работает нормально. Но я не хочу повторять урок холста шесть раз ...
Взгляните на этот github.com/jtblin/angular-chart.js/blob/master/angular-chart.js . Класс «диаграмма-бар» используется для определения того, какой тип диаграммы нужно рисовать. Обсуждение можно найти здесь. github.com/jtblin/angular-chart.js/issues/165 Таким образом, вы должны пройти этот класс, чтобы понять угловую диаграмму, какой тип диаграммы ей нужно построить.
спасибо за ссылки - мне помогло решение (см. ниже)

SaSH_17 · Answer 1 · 2015-11-25T12-24-00.000Z

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

"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>