这么复杂的数据怎么解析？

这样的数据共有三组，这是其中一组，每组都有三个内容，分别是：文本，语音，图片；现在是要把它做成这种效果：

现在的问题是我不会取这三个大组分别对应的数据，研究好老半天了，这三个组的数据就是取不出来。

我现在把X轴的数据固定死了：data:['社区医生', '社区居民', '专科医生']
图例的数据也固定死了：data:['文本','图片','语音']

实际上这两种写死的做法是错的，最起码图例是不可以写死的。
现在的两个问题解决不了：
1、图例的数据取不出来；
2、series 的数据取不出来；series的类型是bar;

可以告诉我图例的数据和series的数据怎么取吗？

数组元素就用数字做索引，对象属性就用属性名称做索引。怎么会不会呢？

简易demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body { margin: 0; }
        .wrap { width: 600px; height: 200px; border: 1px solid #ccc; margin: 100px auto; position: relative; }
        .box { position: absolute; width: 200px; height: 200px;  top: 0; border-left: 1px solid #ccc; }
        .box1 { left:0; }
        .box2 { left:200px; }
        .box3 { left: 400px; }

        .box .showmsg { width: 100%; height: 200px; position: relative; }
        .box p { text-align: center; }

        .item { position: absolute; width: 40px; bottom: 0 }
        .text { left: 20px; background-color: orange; }
        .pic { left: 80px; background-color: pink; }
        .listen { left: 140px; background-color: blue; }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1 box">
            <div class="showmsg doc">
                <div class="text item" id="doc-text"></div>
                <div class="pic item" id="doc-pic"></div>
                <div class="listen item" id="doc-listen"></div>
            </div>
            <p>社区医生</p>
        </div>
        <div class="box2 box">
            <div class="showmsg jum">
                <div class="item text" id="jum-text"></div>
                <div class="item pic" id="jum-pic"></div>
                <div class="item listen" id="jum-listen"></div>
            </div>
            <p>社区居民</p>
        </div>
        <div class="box3 box">
            <div class="showmsg zkdoc">
                <div class="item text" id="zkdoc-text"></div>
                <div class="item pic" id="zkdoc-pic"></div>
                <div class="item listen" id="zkdoc-listen"></div>
            </div>
            <p>专科医生</p>
        </div>
    </div>
</body>
<script>

var data = [
    {
        'role': '社区居民',
        'msgTypeCounts': [
            {
                msgType: 'text',
                msgCount: 10
            }, {
                msgType: 'listen',
                msgCount: 11
            }, {
                msgType: 'picture',
                msgCount: 22
            }
        ]
    },
    {
        'role': '社区医生',
        'msgTypeCounts': [
            {
                msgType: 'text',
                msgCount: 8
            }, {
                msgType: 'listen',
                msgCount: 21
            }, {
                msgType: 'picture',
                msgCount: 12
            }
        ]
    },
    {
        'role': '专科医生',
        'msgTypeCounts': [
            {
                msgType: 'text',
                msgCount: 12
            }, {
                msgType: 'listen',
                msgCount: 11
            }, {
                msgType: 'picture',
                msgCount: 9
            }
        ]
    }
];

function getData(data, role, type) {
    var msgTypeCounts = [];
    for(var i=0; i<data.length; i++) {
        if (role == 'jum' && data[i].role == '社区居民') {
            msgTypeCounts = data[i].msgTypeCounts;
        } else if (role == 'doc' && data[i].role == '社区医生') {
            msgTypeCounts = data[i].msgTypeCounts;
        } else if (role == 'zkdoc' && data[i].role == '专科医生') {
            msgTypeCounts = data[i].msgTypeCounts;
        };
    }

    for(var m = 0; m<msgTypeCounts.length; m++) {
        if (msgTypeCounts[m].msgType == type) {
            return msgTypeCounts[m].msgCount;
        };
    }
}

// 5px 表示一个刻度
document.getElementById('doc-text').style.height = getData(data, 'doc', 'text')*5 + 'px';
document.getElementById('doc-pic').style.height = getData(data, 'doc', 'picture')*5 + 'px';
document.getElementById('doc-listen').style.height = getData(data, 'doc', 'listen')*5 + 'px';

document.getElementById('jum-text').style.height = getData(data, 'jum', 'text')*5 + 'px';
document.getElementById('jum-pic').style.height = getData(data, 'jum', 'picture')*5 + 'px';
document.getElementById('jum-listen').style.height = getData(data, 'jum', 'listen')*5 + 'px';

document.getElementById('zkdoc-text').style.height = getData(data, 'zkdoc', 'text')*5 + 'px';
document.getElementById('zkdoc-pic').style.height = getData(data, 'zkdoc', 'picture')*5 + 'px';
document.getElementById('zkdoc-listen').style.height = getData(data, 'zkdoc', 'listen')*5 + 'px';

    
</script>
</html>

obj.role可取出role对应的字段，obj.MsgTypeCount.msgtype可取出msgtype字段，obj是json对象

【热门文章】