如何将Dynamic Json数据绑定到Chart [英] How do I bind Dynamic Json data to Chart

问题描述

我刚从互联网上下载了一个Bootstrap模板，有一个带有静态数据的图表控件

.html页面

I have just downloaded a Bootstrap Template from internet, there is a chart control with static data's
.html Page

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

< br $>


.js Page

.js Page

$(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表中获取数据，而不是静态数据。非常感谢。

谢谢

Here , Instead of static data i have to fetch data from sql table , any help is highly appreciated.
Thanks

推荐答案

（ function （）{

Morris.Area（{
元素：' morris-area-chart'，
data：[{
period：' 2010 Q1'，
iphone： 2666 ，
ipad： null ，
itouch： 2647
}，{
period：' 2010 Q2'，
iphone： 2778 ，
ipad： 2294 ，
itouch： 2441
}，{
期间：' 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
}，{
期间：' 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
}，{
期间：' 2012 Q2'，
iphone： 8432 ，
ipad： 5713 ，
itouch： 1791
}]，
xkey：' period'，
ykeys：[' iphone'，' ipad'，' itouch']，
标签：[' iPhone'，' iPad'，' iPod Touch']，
pointSize： 2 ，
hideHover：' auto'，
resize：< span class =code-keyword> true
}）;

}

(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表中获取数据，而不是静态数据。非常感谢。

谢谢

Here , Instead of static data i have to fetch data from sql table , any help is highly appreciated.
Thanks

功能Onsuccess（响应）{

var str1 = JSON.parse（response.d）;

Morris.Area（{

元素：'morris-area-chart'，

数据：str1，



xkey：['year']，

ykeys：['sales'，'value']，

标签：['value' ]，

pointSize：3，

fillOpacity：0，

pointStrokeColors：['＃55ce63'，'＃009efb'，'＃2f3d4a ']，

behaveLikeLine：true，

gridLineColor：'＃e0e0e0'，

lineWidth：3，

hideHover：'auto'，

lineColors：['＃55ce63'，'＃009efb'，'＃2f3d4a']，

调整大小：true

}）;

}

}）;

function Onsuccess(response) {
var str1 = JSON.parse(response.d);
Morris.Area({
element: 'morris-area-chart',
data:str1,

xkey: ['year'],
ykeys: ['sales','value'],
labels: ['value'],
pointSize: 3,
fillOpacity: 0,
pointStrokeColors: ['#55ce63', '#009efb', '#2f3d4a'],
behaveLikeLine: true,
gridLineColor: '#e0e0e0',
lineWidth: 3,
hideHover: 'auto',
lineColors: ['#55ce63', '#009efb', '#2f3d4a'],
resize: true
});
}
});

这篇关于如何将Dynamic Json数据绑定到Chart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！