Question

我需要根据从数据库中提取的数据创建不同数量的相同morris js图，即除了形成实际数据外，一切都将保持不变。我的代码完美适用于一个图形但是当我尝试循环一个数组来创建新图形时，它们都会混乱，任何想法如何解决这个问题？

这是我的代码，我只是硬编码的值，因为我仍然需要弄清楚如何自动创建变量并将它们添加到数组中：

    <script>
        var jsonVMs=  [{"y":"2015-03-10 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-11 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-12 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-13 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-14 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-15 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-16 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-17 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-18 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-19 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-20 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-21 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-22 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-23 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-24 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-25 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-26 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-27 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-28 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-29 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-30 00:00:00","a":"20.00","b":"0.0000000"}];

        var jsonVMs1=  [{"y":"2015-03-11 00:00:00","a":"3","b":"3"},{"y":"2015-03-12 00:00:00","a":"5","b":"1"},{"y":"2015-03-13 00:00:00","a":"4","b":"0"},{"y":"2015-03-14 00:00:00","a":"4","b":"0"},{"y":"2015-03-15 00:00:00","a":"4","b":"0"},{"y":"2015-03-16 00:00:00","a":"6","b":"1"},{"y":"2015-03-17 00:00:00","a":"12","b":"5"},{"y":"2015-03-18 00:00:00","a":"14","b":"5"},{"y":"2015-03-19 00:00:00","a":"14","b":"2"},{"y":"2015-03-20 00:00:00","a":"14","b":"3"},{"y":"2015-03-21 00:00:00","a":"15","b":"2"},{"y":"2015-03-22 00:00:00","a":"15","b":"2"},{"y":"2015-03-23 00:00:00","a":"15","b":"4"},{"y":"2015-03-24 00:00:00","a":"17","b":"6"},{"y":"2015-03-25 00:00:00","a":"17","b":"6"},{"y":"2015-03-26 00:00:00","a":"19","b":"9"},{"y":"2015-03-27 00:00:00","a":"17","b":"6"},{"y":"2015-03-28 00:00:00","a":"17","b":"6"},{"y":"2015-03-29 00:00:00","a":"17","b":"6"},{"y":"2015-03-30 00:00:00","a":"18","b":"6"}];

        var a = [jsonVMs,jsonVMs1];

    </script>

    <div id="VMsDiv1" ></div>

    <script type="text/javascript">
    var index =0;
    while (index < a.length) {
    new Morris.Line({
        // ID of the element in which to draw the chart.
        element: 'VMsDiv1',
        // Chart data records -- each entry in this array corresponds to a point on
        // the chart.
        data:a[index],
        // The name of the data record attribute that contains x-values.
        xkey: 'y',
        // A list of names of data record attributes that contain y-values.
        ykeys: ['a','b'],
        // Labels for the ykeys -- will be displayed when you hover over the
        // chart.
        xLabelFormat: function(d) {
        return d.getDate()+'/'+(d.getMonth()+1)+'/'+d.getFullYear();},
        labels: ['Total VMs','Powered On'],
        dateFormat: function(date) {
        d = new Date(date);
        return d.getDate()+'/'+(d.getMonth()+1)+'/'+d.getFullYear(); 
        },
        hideHover: true
    });
    index++

    }

Answer 1

根据我的评论，您需要分隔将呈现图表的div。

因此，添加另一个div，如：

<div id="VMsDiv0" ></div>

并将该行更改为：

while (index < a.length) {
    new Morris.Line({
        // ...
        element: 'VMsDiv'+index,
        // ...
    });
}

创建不同数量的morris js线图？

1 个答案: