King Fisher Ответов: 1

Как привязать динамические данные Json к диаграмме


Я только что скачал шаблон Bootstrap из интернета, там есть элемент управления диаграммой со статическими данными.
.HTML-страница

<div class="panel-body">
<div id="morris-area-chart"></div>
</div>



.в JS страницы
$(function() {

    Morris.Area({
        element: 'morris-area-chart',
        data: [{
            period: '2010 Q1',
            iphone: 2666,
            ipad: null,
            itouch: 2647
        }, {
            period: '2010 Q2',
            iphone: 2778,
            ipad: 2294,
            itouch: 2441
        }, {
            period: '2010 Q3',
            iphone: 4912,
            ipad: 1969,
            itouch: 2501
        }, {
            period: '2010 Q4',
            iphone: 3767,
            ipad: 3597,
            itouch: 5689
        }, {
            period: '2011 Q1',
            iphone: 6810,
            ipad: 1914,
            itouch: 2293
        }, {
            period: '2011 Q2',
            iphone: 5670,
            ipad: 4293,
            itouch: 1881
        }, {
            period: '2011 Q3',
            iphone: 4820,
            ipad: 3795,
            itouch: 1588
        }, {
            period: '2011 Q4',
            iphone: 15073,
            ipad: 5967,
            itouch: 5175
        }, {
            period: '2012 Q1',
            iphone: 10687,
            ipad: 4460,
            itouch: 2028
        }, {
            period: '2012 Q2',
            iphone: 8432,
            ipad: 5713,
            itouch: 1791
        }],
        xkey: 'period',
        ykeys: ['iphone', 'ipad', 'itouch'],
        labels: ['iPhone', 'iPad', 'iPod Touch'],
        pointSize: 2,
        hideHover: 'auto',
        resize: true
    });

}


Здесь вместо статических данных я должен извлекать данные из таблицы sql , любая помощь высоко ценится.
Спасибо

Thanks7872

Сделайте ajax-запрос,получите данные из БД в требуемом формате и передайте их в раздел "Данные". В чем же проблема?

Смотрите это : http://stackoverflow.com/a/16105057

1 Ответов

Рейтинг:
1

Member 13823652

функция Onsuccess(ответ) {
ВАР str1 выглядит следующим образом = формат JSON.разбора(ответ.д);
Моррис.Область({
элемент: 'morris-area-chart',
сведения:str1 выглядит следующим образом,

xkey: ['год'],
ykeys: ['продажи','стоимость'],
метки: ['value'],
размер точки: 3,
заполняемость: 0,
pointStrokeColors: ['#55ce63', '#009efb', '#2f3d4a'],
behaveLikeLine: правда,
gridLineColor: '#e0e0e0',
ширина линии: 3,
hideHover: "авто",
lineColors: ['#55ce63', '#009efb', '#2f3d4a'],
размер: верно
});
}
});