HTML5图表无法呈现

时间:2014-05-06 23:02:54

标签: javascript jquery charts

我正在尝试使用morris.js创建图表。我无法理解为什么我渲染的数据不起作用。这是整个功能。我收到错误:Uncaught TypeError: Cannot read property 'match' of undefined

LINK TO MORRIS.JS DEMO

$(function () {
    Morris.Line({
        element: 'line-example',
        data: [{
            "date": "2014-05-03",
                "71236": "247893",
                "71232": "19520",
                "70555": "16723",
                "33315": "415516",
                "61236": null,
                "62243": null
        }, {
            "date": "2014-05-04",
                "71236": "315174",
                "71232": "19103",
                "70555": "16572",
                "33315": "443728",
                "61236": null,
                "62243": null
        }, {
            "date": "2014-05-05",
                "71236": "265",
                "71232": "469",
                "70555": "519945",
                "33315": "24635",
                "61236": "74245",
                "62243": "568387"
        }, {
            "date": "2014-05-06",
                "71236": "20",
                "71232": "17",
                "70555": "38684",
                "33315": "1794",
                "61236": "3762",
                "62243": "24660"
        }],
        xkeys: 'date',
        ykeys: ["71236", "71232", "70555", "33315", "61236", "62243"],
        labels: ["71236", "71232", "70555", "33315", "61236", "62243"]
    });

});

这种语法出了什么问题?

修改

我现在已经简化并制作了尽可能多的演示版,仍然无法正常工作:

$(function () {
    Morris.Line({
        element: 'line-example',
        data: [
            {"y": "2011", a: "247893", b: "19520", c: "16723", d: "415516", e: "3", f: "3"}, 
            {"y": "2012", a: "315174", b: "19103", c: "16572", d: "443728", e: "3", f: "3"}, 
            {"y": "2013", a: "265", b: "469", c: "519945", d: "24635", e: "74245", f: "568387"}, 
            {"y": "2014", a: "20", b: "17", c: "38684", d: "1794", e: "3762", f: "24660"}
        ],
        xkeys: "y",
        ykeys: ["a", "b", "c", "d", "e", "f"],
        labels: ["a", "b", "c", "d", "e", "f"]
    });

});

JSBIN

1 个答案:

答案 0 :(得分:1)

好的,我知道你的主要问题是什么。 http://jsbin.com/uqawig/3202/edit

你只需改变两件事。 1从jQuery就绪功能中取出它。 (这不是解决问题的必要条件) 2它xkey而非xkeys 这是主要问题。改变这两件事,你会很高兴。 我以前说的其他一切都是不真实的。

相关问题