堆栈内存溢出
  简体   繁体   English

jQuery选项卡中的morris.js图表

[英]morris.js chart in jquery tabs

 原文  2014-12-24 15:01:08  1   1    javascript/ jquery/ tabs/ morris.js

问题描述

I am struggling with morris.js charts within jquery tabs: 我在jquery选项卡中的morris.js图表​​中苦苦挣扎：

http://morrisjs.github.io/morris.js/ http://morrisjs.github.io/morris.js/

http://jqueryui.com/tabs/#default http://jqueryui.com/tabs/#default

The first chart shows fine but the other tabs only show the morris-hover: 第一个图表显示正常，但其他选项卡仅显示morris-hover：

莫里斯 - 悬停 . 。

EDIT: (Not sure why this stopped working - was working on post and picture is still live). 编辑：（不知道为什么这会停止工作-正在处理帖子，并且图片仍然有效）。

No errors in the console. 控制台中没有错误。 I am not the greatest with js but pretty certain all the chart code is fine because the charts show when taken out of the tabs. 我不是最擅长使用js，但可以肯定的是，所有图表代码都可以，因为图表是从选项卡中取出时显示的。

The tab code seems fine as works with text. 制表符代码似乎可以与文本一起使用。

I have seen dotted about a few mentions of using redraw() to fix this but not really sure how to and any jsfiddles that I find are offline or don't work. 我看到一些关于使用redraw（）修复此问题的说法，但并不确定如何操作，我发现任何jsfiddles都脱机或不起作用。 Like this one . 喜欢这个 。

If anyone could offer me some guidance it would be greatly appreciated! 如果有人可以给我一些指导，将不胜感激！

HTML: HTML： 

        <div id="tabs">
                        <div id="tabs-1" class="statdiv">
            <h4>Tab</h4>
                            <div class="panel-body">
                                <div id="morris-line-chart"></div>
                            </div>
            </div>

                        <div id="tabs-2" class="statdiv">
            <h4>Tab 2</h4>
                            <div class="panel-body">
                                <div id="morris-line-chart2"></div>
                            </div>
            </div>

                        <div id="tabs-3" class="statdiv">
            <h4>Tab 3</h4>
                            <div class="panel-body">
                                <div id="morris-line-chart3"></div>
                            </div>
            </div>

                        <div id="tabs-4" class="statdiv">
            <h4>Tab 4</h4>
                            <div class="panel-body">
                                <div id="morris-line-chart4"></div>
                            </div>
            </div>

            <ul class="navtab">
                <li class="stattab1 active"><a href="#tabs-1">Tab 1</a></li>
                <li class="stattab2"><a href="#tabs-2">Tab 2</a></li>
                <li class="stattab3"><a href="#tabs-3">Tab 3</a></li>
                <li class="stattab4"><a href="#tabs-4">Tab 4</a></li>
            </ul>

        </div>

JS for Charts: 图表JS： 

$(function() {

Morris.Line({
    // ID of the element in which to draw the chart.
    element: 'morris-line-chart',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [{
        d: '2012-10-01',
        visits: 802
    }, {
        d: '2012-10-02',
        visits: 783
    }, {
        d: '2012-10-03',
        visits: 820
    }, {
        d: '2012-10-04',
        visits: 839
    }, {
        d: '2012-10-05',
        visits: 792
    }, {
        d: '2012-10-06',
        visits: 859
    }, {
        d: '2012-10-07',
        visits: 790
    }, {
        d: '2012-10-08',
        visits: 1680
    }, {
        d: '2012-10-09',
        visits: 1592
    }, {
        d: '2012-10-10',
        visits: 1420
    }, {
        d: '2012-10-11',
        visits: 882
    }, {
        d: '2012-10-12',
        visits: 889
    }, {
        d: '2012-10-13',
        visits: 819
    }, {
        d: '2012-10-14',
        visits: 849
    }, {
        d: '2012-10-15',
        visits: 870
    }, {
        d: '2012-10-16',
        visits: 1063
    }, {
        d: '2012-10-17',
        visits: 1192
    }, {
        d: '2012-10-18',
        visits: 1224
    }, {
        d: '2012-10-19',
        visits: 1329
    }, {
        d: '2012-10-20',
        visits: 1329
    }, {
        d: '2012-10-21',
        visits: 1239
    }, {
        d: '2012-10-22',
        visits: 1190
    }, {
        d: '2012-10-23',
        visits: 1312
    }, {
        d: '2012-10-24',
        visits: 1293
    }, {
        d: '2012-10-25',
        visits: 1283
    }, {
        d: '2012-10-26',
        visits: 1248
    }, {
        d: '2012-10-27',
        visits: 1323
    }, {
        d: '2012-10-28',
        visits: 1390
    }, {
        d: '2012-10-29',
        visits: 1420
    }, {
        d: '2012-10-30',
        visits: 1529
    }, {
        d: '2012-10-31',
        visits: 1892
    }, ],
    // The name of the data record attribute that contains x-visitss.
    xkey: 'd',
    // A list of names of data record attributes that contain y-visitss.
    ykeys: ['visits'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['Visits'],
    // Disables line smoothing
    smooth: false,
    resize: false
});

Morris.Line({
    // ID of the element in which to draw the chart.
    element: 'morris-line-chart2',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [{
        d: '2012-10-01',
        visits: 802
    }, {
        d: '2012-10-02',
        visits: 783
    }, {
        d: '2012-10-03',
        visits: 820
    }, {
        d: '2012-10-04',
        visits: 839
    }, {
        d: '2012-10-05',
        visits: 792
    }, {
        d: '2012-10-06',
        visits: 859
    }, {
        d: '2012-10-07',
        visits: 790
    }, {
        d: '2012-10-08',
        visits: 1680
    }, {
        d: '2012-10-09',
        visits: 1592
    }, {
        d: '2012-10-10',
        visits: 1420
    }, {
        d: '2012-10-11',
        visits: 882
    }, {
        d: '2012-10-12',
        visits: 889
    }, {
        d: '2012-10-13',
        visits: 819
    }, {
        d: '2012-10-14',
        visits: 849
    }, {
        d: '2012-10-15',
        visits: 870
    }, {
        d: '2012-10-16',
        visits: 1063
    }, {
        d: '2012-10-17',
        visits: 1192
    }, {
        d: '2012-10-18',
        visits: 1224
    }, {
        d: '2012-10-19',
        visits: 1329
    }, {
        d: '2012-10-20',
        visits: 1329
    }, {
        d: '2012-10-21',
        visits: 1239
    }, {
        d: '2012-10-22',
        visits: 1190
    }, {
        d: '2012-10-23',
        visits: 1312
    }, {
        d: '2012-10-24',
        visits: 1293
    }, {
        d: '2012-10-25',
        visits: 1283
    }, {
        d: '2012-10-26',
        visits: 1248
    }, {
        d: '2012-10-27',
        visits: 1323
    }, {
        d: '2012-10-28',
        visits: 1390
    }, {
        d: '2012-10-29',
        visits: 1420
    }, {
        d: '2012-10-30',
        visits: 1529
    }, {
        d: '2012-10-31',
        visits: 1892
    }, ],
    // The name of the data record attribute that contains x-visitss.
    xkey: 'd',
    // A list of names of data record attributes that contain y-visitss.
    ykeys: ['visits'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['Visits'],
    // Disables line smoothing
    smooth: false,
    resize: false
});


Morris.Line({
    // ID of the element in which to draw the chart.
    element: 'morris-line-chart3',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [{
        d: '2012-10-01',
        visits: 802
    }, {
        d: '2012-10-02',
        visits: 783
    }, {
        d: '2012-10-03',
        visits: 820
    }, {
        d: '2012-10-04',
        visits: 839
    }, {
        d: '2012-10-05',
        visits: 792
    }, {
        d: '2012-10-06',
        visits: 859
    }, {
        d: '2012-10-07',
        visits: 790
    }, {
        d: '2012-10-08',
        visits: 1680
    }, {
        d: '2012-10-09',
        visits: 1592
    }, {
        d: '2012-10-10',
        visits: 1420
    }, {
        d: '2012-10-11',
        visits: 882
    }, {
        d: '2012-10-12',
        visits: 889
    }, {
        d: '2012-10-13',
        visits: 819
    }, {
        d: '2012-10-14',
        visits: 849
    }, {
        d: '2012-10-15',
        visits: 870
    }, {
        d: '2012-10-16',
        visits: 1063
    }, {
        d: '2012-10-17',
        visits: 1192
    }, {
        d: '2012-10-18',
        visits: 1224
    }, {
        d: '2012-10-19',
        visits: 1329
    }, {
        d: '2012-10-20',
        visits: 1329
    }, {
        d: '2012-10-21',
        visits: 1239
    }, {
        d: '2012-10-22',
        visits: 1190
    }, {
        d: '2012-10-23',
        visits: 1312
    }, {
        d: '2012-10-24',
        visits: 1293
    }, {
        d: '2012-10-25',
        visits: 1283
    }, {
        d: '2012-10-26',
        visits: 1248
    }, {
        d: '2012-10-27',
        visits: 1323
    }, {
        d: '2012-10-28',
        visits: 1390
    }, {
        d: '2012-10-29',
        visits: 1420
    }, {
        d: '2012-10-30',
        visits: 1529
    }, {
        d: '2012-10-31',
        visits: 1892
    }, ],
    // The name of the data record attribute that contains x-visitss.
    xkey: 'd',
    // A list of names of data record attributes that contain y-visitss.
    ykeys: ['visits'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['Visits'],
    // Disables line smoothing
    smooth: false,
    resize: true
});

 Morris.Line({
    // ID of the element in which to draw the chart.
    element: 'morris-line-chart4',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [{
        e: '2012-10-01',
        visit: 9
    }, {
        e: '2012-10-02',
        visit: 783
    }, {
        e: '2012-10-03',
        visit: 820
    }, {
        e: '2012-10-04',
        visit: 839
    }, {
        e: '2012-10-05',
        visit: 792
    }, {
        e: '2012-10-06',
        visit: 859
    }, {
        e: '2012-10-07',
        visit: 790
    }, {
        e: '2012-10-08',
        visit: 1680
    }, {
        e: '2012-10-09',
        visit: 1592
    }, {
        e: '2012-10-10',
        visit: 1420
    }, {
        e: '2012-10-11',
        visit: 882
    }, {
        e: '2012-10-12',
        visit: 889
    }, {
        e: '2012-10-13',
        visit: 819
    }, {
        e: '2012-10-14',
        visit: 849
    }, {
        e: '2012-10-15',
        visit: 870
    }, {
        e: '2012-10-16',
        visit: 1063
    }, {
        e: '2012-10-17',
        visit: 1192
    }, {
        e: '2012-10-18',
        visit: 1224
    }, {
        e: '2012-10-19',
        visit: 1329
    }, {
        e: '2012-10-20',
        visit: 1329
    }, {
        e: '2012-10-21',
        visit: 1239
    }, {
        e: '2012-10-22',
        visit: 1190
    }, {
        e: '2012-10-23',
        visit: 1312
    }, {
        e: '2012-10-24',
        visit: 1293
    }, {
        e: '2012-10-25',
        visit: 1283
    }, {
        e: '2012-10-26',
        visit: 1248
    }, {
        e: '2012-10-27',
        visit: 1323
    }, {
        e: '2012-10-28',
        visit: 1390
    }, {
        e: '2012-10-29',
        visit: 1420
    }, {
        e: '2012-10-30',
        visit: 1529
    }, {
        e: '2012-10-31',
        visit: 1892
    }, ],
    // The name of the data record attribute that contains x-visitss.
    xkey: 'e',
    // A list of names of data record attributes that contain y-visitss.
    ykeys: ['visit'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['visit'],
    // Disables line smoothing
    smooth: false,
    resize: false
});


Morris.Donut({
    element: 'morris-donut-chart',
    data: [{
        label: "Download Sales",
        value: 12
    }, {
        label: "In-Store Sales",
        value: 30
    }, {
        label: "Mail-Order Sales",
        value: 20
    }],
    resize: true
});


Morris.Donut({
    element: 'morris-donut-chart2',
    data: [{
        label: "Download Sales",
        value: 1
    }, {
        label: "In-Store Sales",
        value: 30
    }, {
        label: "Mail-Order Sales",
        value: 20
    }],
    resize: true
});




});

EDIT: Found a lot more posts about this but all the answers point to a jsfiddle that is no longer available :(. 编辑：找到了更多关于此的文章，但所有答案都指向不再可用的jsfiddle :(。

EDIT 2: Also found this however the jsfiddle doesn't actually show the graphs so looks broken also http://jsfiddle.net/rbsthlm/cD6dd/12/ . 编辑2：但也发现这点，但是jsfiddle实际上并未显示图形，因此看起来也很损坏http://jsfiddle.net/rbsthlm/cD6dd/12/ 。 Can't seem to get redraw() to work. 似乎无法使redraw（）正常工作。

1 个解决方案

解决方案1
 3 已采纳  2014-12-27 22:52:50

Found the solution here: 在这里找到解决方案：

http://jsfiddle.net/rbsthlm/cD6dd/12/ http://jsfiddle.net/rbsthlm/cD6dd/12/ 

<div id="monitor" class="panel panel-default tab-box">
<div class="panel-heading">
     <h3 class="panel-title">
        <i class="fa fa-signal"></i>
        Monitoring report
    </h3>

    <ul class="nav nav-tabs">
        <li class="active"> <a href="#fuel-tab" data-toggle="tab" data-identifier="line, donut">Fuel data</a>

        </li>
        <li> <a href="#co2-tab" data-toggle="tab" data-identifier="bar1">Co2 data</a>

        </li>
    </ul>
</div>
<div class="panel-body">
    <div class="tab-content">
        <div id="fuel-tab" class="tab-pane active">
            <div class="row">
                <div class="col-sm-12 col-md-7 chart">
                    <div class="caption">Fuel consumption last 12 months <span class="label label-default">Liter/100km</span>

                    </div>
                    <div id="fuel-consumption"></div>
                    <div class="legend"> <span id="city" class="label">City</span>
<span id="highway" class="label">Highway</span>
<span id="idle" class="label">Idle</span>

                    </div>
                </div>
                <div class="col-sm-12 col-md-5 chart">
                    <div class="caption">Fuel projection this month</div>
                    <div id="fuel-projection"></div>
                    <div class="legend"> <span id="projection" class="label">Projection</span>
<span id="today" class="label">Until today</span>

                    </div>
                </div>
            </div>
        </div>
        <div id="co2-tab" class="tab-pane">
            <div class="row">
                <div class="col-xs-12 chart">
                    <div class="caption">Monthly Co2 Emissions <span class="label label-default">g/km</span>

                    </div>
                    <div id="co2-emissions"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

JS: JS： 

$('ul.nav a').on('shown.bs.tab', function (e) {
var types = $(this).attr("data-identifier");
var typesArray = types.split(",");
$.each(typesArray, function (key, value) {
    eval(value + ".redraw()");
})
});
// Morris graphs ---------------------------------------------------------- //
// on doc ready
$(function () {
// Fuel consumption //
// Data set for fuel consumption
var fuel_data = [{
    "period": "2013-01",
    "city": 66,
    "highway": 34,
    "idle": 9
}, {
    "period": "2013-02",
    "city": 62,
    "highway": 33,
    "idle": 8
}, {
    "period": "2013-03",
    "city": 61,
    "highway": 32,
    "idle": 7
}, {
    "period": "2013-04",
    "city": 66,
    "highway": 32,
    "idle": 6
}, {
    "period": "2013-05",
    "city": 67,
    "highway": 31,
    "idle": 5
}, {
    "period": "2013-06",
    "city": 68,
    "highway": 43,
    "idle": 7
}, {
    "period": "2013-07",
    "city": 62,
    "highway": 32,
    "idle": 5
}, {
    "period": "2013-08",
    "city": 61,
    "highway": 32,
    "idle": 5
}, {
    "period": "2013-09",
    "city": 58,
    "highway": 32,
    "idle": 7
}, {
    "period": "2013-10",
    "city": 60,
    "highway": 32,
    "idle": 7
}, {
    "period": "2013-11",
    "city": 60,
    "highway": 32,
    "idle": 6
}, {
    "period": "2013-12",
    "city": 62,
    "highway": 32,
    "idle": 8
}];
// Line chart parameters for fuel consumption
var fuel_consumption = {
    element: 'fuel-consumption',
    hideHover: 'auto',
    data: fuel_data,
    xkey: 'period',
    xLabels: 'month',
    ykeys: ['city', 'highway', 'idle'],
    postUnits: ' l/100km',
    labels: ['City', 'Highway', 'Idle'],
    resize: true,
    lineColors: ['#A52A2A', '#72A0C1', '#7BB661']
    //yLabelFormat: function(y) { return y.toString() + ' l/100km'; }
}

// Make a line chart from the parameters
line = Morris.Line(fuel_consumption)
// / Fuel consumption //

// Fuel projection //
// Data set for fuel projection
var projection_data = [{
    label: 'Until today',
    value: 180
}, {
    label: 'Projected',
    value: 400
}, ]
// Donut chart parameters for fuel projection
var fuel_projection = {
    element: 'fuel-projection',
    hideHover: 'auto',
    resize: true,
    data: projection_data,
    colors: ['#7BB661', '#72A0C1'],
    formatter: function (y) {
        return y + " liters"
    }
}

// Make a donut chart from the parameters
donut = Morris.Donut(fuel_projection)
// / Fuel projection //

// Fuel emissions //
// Data set for fuel emissions
var co2_data = [{
    month: 'Jan',
    emissions: 35
}, {
    month: 'Feb',
    emissions: 37
}, {
    month: 'Mar',
    emissions: 40
}, {
    month: 'Apr',
    emissions: 38
}, {
    month: 'Maj',
    emissions: 39
}, {
    month: 'Jun',
    emissions: 42
}, {
    month: 'Jul',
    emissions: 37
}, {
    month: 'Aug',
    emissions: 65
}, {
    month: 'Sep',
    emissions: 38
}, {
    month: 'Okt',
    emissions: 45
}, {
    month: 'Nov',
    emissions: 41
}, {
    month: 'Dec',
    emissions: 41
}]
//Bar chart parameters for CO2 emissions
var co2_emissions = {
    element: 'co2-emissions',
    resize: true,
    data: co2_data,
    xkey: 'month',
    ykeys: ['emissions'],
    labels: ['Co2 emissions'],
    barRatio: 0.4,
    xLabelAngle: 35,
    hideHover: 'auto',
    postUnits: ' g/km',
    formatter: function (y) {
        return y + " g/km"
    }
}

// Make a bar chart from the parameters
bar1 = Morris.Bar(co2_emissions)
// / Fuel emisisons //
});
// / Morris graphs -------------------------------------------------------- //

It only drew half the chart though - which is where this came in handy: 尽管它只吸引了一半的图表-这很方便： 

#chartelementid svg {width:100%;}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Morris.js Doughnut标签不在中心jquery标签中 - Morris.js Donut Label not in center jquery tabs morris.js水平条形图 - morris.js horizontal bar chart 将 Morris.js 图表导出为 PDF？ - Export Morris.js chart into PDF? Morris.js条形图缺少标签 - Morris.js bar chart missing labels morris.js-带有json文件的折线图 - morris.js - line chart with json file 从 JQUERY/AJAX 到 Morris.JS 的数据 - Data from JQUERY/AJAX to Morris.JS 如何将值传递给图表（chart.js / morris.js） - How to pass values to a chart (chart.js / morris.js) Morris.js-如何向条形图添加数据标签 - Morris.js - How to add data labels to bar chart 如何在容器尺寸的更改上调整Morris.js图表​​的大小 - How to resize Morris.js chart on changes to container dimensions Morris.js条形图的自定义悬停图例 - Custom Hover Legend for Morris.js Bar Chart
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM