C3图表在响应式网格中无响应

时间：2018-04-21 21:55:15

标签： javascript html css c3.js

我正在使用响应式网格，我看到有关这两个框的响应性的异常行为。这两个框有两个从javascript加载的c3图表。当我在桌面加载页面时，一切都很好。当我试图减小窗口大小时，包含图表的框会崩溃。这些框垂直显示而不是水平显示（尽管屏幕尺寸不小）。

＆＃13;
＆＃13; 
var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2018-03-02', '2018-03-10'],
            ['Cost', 2.023, 0.3]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d'
            }
        }
    }
});

setTimeout(function () {
    chart.load({
        columns: [
            ['Cost', 2.023, 0.3]
        ],
        types: {
            Cost: 'bar'
        },
        colors: {
            Cost: '#00BBDE'
        }
    });
}, 10);

//Second Chart

var months = ['2018-03-02', '2018-03-10'];
var columnData = [
    ['aaaaaaaaaaaa', 1.2, 0.3],
    ['bbbbbbbbbbbb', 0.445, 0],
    ['ccccccccccccc', 0.378, 0]
];


var chart2 = c3.generate({
    bindto: '#chart2',
    data: {
        columns: columnData,
        type: 'bar',
        colors: {
            aaaaaaaaaaaa: '#00BBDE',
            bbbbbbbbbbbb: '#90EE7E',
            ccccccccccccc: '#F45B5B'
        },
        groups: [['aaaaaaaaaaaa', 'bbbbbbbbbbbb', 'ccccccccccccc']],
    },

    axis: {
        x: {
            type: 'category',
            categories: months,
        }
    },
});
＆＃13; 
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
    color: #404040;
    font: 100 1em/150% "Roboto", Helvetica, sans-serif;
}

.wrapper {
    width: 100%;
    margin: auto;
}

h2, h3, h4 {
    font-weight: 900;
    color: #333;
    margin: 1.5em 0 0.5em;
    background: #00BBDE;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.8em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.3em;
}

strong {
    font-weight: 600;
}

hr {
    border: none;
    height: 1px;
}

.img-placeholder {
    background-image: url("http://placehold.it/200x100/CC99CC/ffffff&text=Feature");
    background-size: cover;
    min-height: 100px;
    min-width: 100px;
}

/*Basic Grid Styles*/

.Grid {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.u-textCenter {
    text-align: center;
}

.Grid-cell {
    flex: 1;
}

.Demo {
    padding: .8em 1em 0;
    margin-bottom: 1em;
    transition: background-color 0.3s ease;
}

.Demo:after {
    content: "";
    display: block;
    margin-top: .8em;
    height: 1px;
}

/* With gutters*/

.Grid--gutters {
    margin-left: -1em;
}

.Grid--gutters .Grid-cell {
    padding-left: 1em;
}

.Grid--gutters .Grid--nested .Grid-cell:first-of-type .Demo {
    margin-right: 1em;
}

/* Justify per row*/

.Grid--right {
    justify-content: flex-end;
}

.Grid--center {
    justify-content: center;
}

/* Alignment per row */

.Grid--top {
    align-items: flex-start;
}

.Grid--bottom {
    align-items: flex-end;
}

.Grid--center {
    align-items: center;
}

/* Alignment per cell */

.Grid-cell--top {
    align-self: flex-start;
}

.Grid-cell--bottom {
    align-self: flex-end;
}

.Grid-cell--center {
    align-self: center;
}

/*===========================================*/

/* Base classes for all media - Mobile first */

.Grid--cols-2>.Grid-cell {
    flex: 0 0 100%;
}

.Grid--cols-3>.Grid-cell {
    flex: 0 0 100%;
}

.Grid--cols-4>.Grid-cell {
    flex: 0 0 100%;
}

.Grid--cols-6>.Grid-cell {
    flex: 0 0 calc(50% - 1em);
}

.Grid--cols-12>.Grid-cell {
    flex: 0 0 calc(33.3333% - 1em);
}

.Grid--holly-grail .aside, .Grid--holly-grail .main {
    flex: 1 100%;
}

/* One of -- columns*/

.Grid--1of2>.Grid-cell, .Grid--1of4>.Grid-cell:first-of-type, .Grid--1of3>.Grid-cell:first-of-type {
    flex: 0 0 100%;
}

.Grid--1of6>.Grid-cell:first-of-type {
    flex: 0 0 50%;
}

.Grid--fit>.Grid-cell {
    flex: 1;
}

.Grid--full>.Grid-cell {
    flex: 0 0 100%;
}

/* Tablet (medium) screens */

@media (min-width: 30em) {
    .Grid--cols-4>.Grid-cell {
        flex: 0 0 calc(50% - 1em);
    }
    .Grid--cols-6>.Grid-cell {
        flex: 0 0 calc(33.3333% - 1em);
    }
    .Grid--cols-12>.Grid-cell {
        flex: 0 0 calc(16.6666% - 1em);
    }
    .Grid--holly-grail .aside {
        flex: 1 calc(25% - 1em);
    }
    .Grid--1of2>.Grid-cell {
        flex: 0 0 50%;
    }
    .Grid--1of6>.Grid-cell:first-of-type {
        flex: 0 0 30%;
    }
    .Grid--1of4>.Grid-cell:first-of-type {
        flex: 0 0 50%;
    }
    .Grid--1of3>.Grid-cell:first-of-type {
        flex: 0 0 100%;
    }
}

/* Large screens */

@media (min-width: 38em) {
    .Grid--cols-2>.Grid-cell, .Grid--cols-3>.Grid-cell, .Grid--cols-4>.Grid-cell, .Grid--cols-6>.Grid-cell, .Grid--cols-12>.Grid-cell {
        flex: 1;
    }
    .Grid--holly-grail .main {
        flex: 2;
    }
    .Grid--holly-grail .aside {
        flex: 1;
    }
    .Grid--holly-grail .aside-1 {
        order: 1;
    }
    .Grid--holly-grail .main {
        order: 2;
    }
    .Grid--holly-grail .aside-2 {
        order: 3;
    }
    .Grid--1of2>.Grid-cell {
        flex: 0 0 50%;
    }
    .Grid--1of6>.Grid-cell:first-of-type {
        flex: 0 0 16.6666%;
    }
    .Grid--1of4>.Grid-cell:first-of-type {
        flex: 0 0 25%;
    }
    .Grid--1of3>.Grid-cell:first-of-type {
        flex: 0 0 30%;
    }
    .Grid--gutters.Grid--nested .Grid-cell:first-of-type .Demo {
        margin-right: 0;
    }
}

@import url('https://fonts.googleapis.com/css?family=Roboto');
#dynamic_table {
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 1.42em;
    color: #454545;
    text-transform: capitalize;
    background: #124;
}

h1 {
    font-size: 3em;
    font-weight: 300;
    line-height: 1em;
    text-align: center;
    color: #4DC3FA;
}

h2 {
    font-size: 1em;
    font-weight: 300;
    text-align: center;
    display: block;
    line-height: 1em;
    padding-bottom: 2em;
    color: #99C63A;
}

h2 a {
    font-weight: 700;
    text-transform: uppercase;
    color: #99C63A;
    text-decoration: none;
}

#dynamic_table th h1 {
    font-weight: bold;
    font-size: 1em;
    text-align: left;
    color: #454545;
}

#dynamic_table td {
    font-weight: normal;
    font-size: 1em;
    -webkit-box-shadow: 0 2px 2px -2px #99C63A;
    -moz-box-shadow: 0 2px 2px -2px #99C63A;
    box-shadow: 0 2px 2px -2px #99C63A;
}

#dynamic_table {
    text-align: left;
    overflow: hidden;
    width: 99%;
    margin: 0 auto;
    display: table;
    padding: 0 0 8em 0;
}

#dynamic_table td, #dynamic_table th {
    padding-bottom: 2%;
    padding-top: 2%;
    padding-left: 2%;
}

/* Background-color of the odd rows */

#dynamic_table tr:nth-child(odd) {
    background-color: #fff;
}

/* Background-color of the even rows */

#dynamic_table tr:nth-child(even) {
    background-color: #fff;
}

#dynamic_table th {
    background-color: #f1f1f1;
}

/*D3 CSS*/

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
    background: #3A3A4F;
}

.c3-shape .c3-shape-0 .c3-bar .c3-bar-0 {
    stroke: rgb(124, 10, 44);
    fill: rgb(124, 0, 44);
    opacity: 1;
}

.c3 svg {
    font: 16px Roboto;
    color: #f1f1f1!important;
}

.c3 line, .c3 path {
    fill: none;
    stroke: #f1f1f1;
}

.c3 text {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.c3-bars path, .c3-event-rect, .c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid {
    shape-rendering: crispEdges
}

.c3-chart-arc path {
    stroke: #fff
}

.c3-chart-arc text {
    fill: #fff;
    font-size: 13px
}

.c3-grid line {
    stroke: #aaa
}

.c3-grid text {
    fill: #aaa
}

.c3-xgrid, .c3-ygrid {
    stroke-dasharray: 3 3
}

.c3-text.c3-empty {
    fill: gray;
    font-size: 2em
}

.c3-line {
    stroke-width: 1px
}

.c3-circle._expanded_ {
    stroke-width: 1px;
    stroke: #fff
}

.c3-selected-circle {
    fill: #fff;
    stroke-width: 2px
}

.c3-bar {
    stroke-width: 0
}

.c3-bar._expanded_ {
    fill-opacity: .75
}

.c3-target.c3-focused {
    opacity: 1
}

.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
    stroke-width: 2px
}

.c3-target.c3-defocused {
    opacity: .3!important
}

.c3-region {
    fill: #4682b4;
    fill-opacity: .1
}

.c3-brush .extent {
    fill-opacity: .1
}

.c3-legend-item {
    font-size: 12px
}

.c3-legend-item-hidden {
    opacity: .15
}

.c3-legend-background {
    opacity: .75;
    fill: #fff;
    stroke: #d3d3d3;
    stroke-width: 1
}

.c3-tooltip-container {
    z-index: 10
}

.c3-tooltip {
    font-family: Roboto;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #fff;
    empty-cells: show;
    -webkit-box-shadow: 7px 7px 12px -9px #777;
    -moz-box-shadow: 7px 7px 12px -9px #777;
    box-shadow: 7px 7px 12px -9px #777;
    opacity: .9
}

.c3-tooltip tr {
    border: 1px solid #000
}

.c3-tooltip th {
    background-color: #000;
    font-size: 14px;
    padding: 2px 5px;
    text-align: left;
    color: #FFF
}

.c3-tooltip td {
    font-size: 13px;
    padding: 3px 6px;
    background-color: #fff;
    border-left: 1px solid #000
}

.c3-tooltip td>span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px
}

.c3-tooltip td.value {
    text-align: right
}

.c3-area {
    stroke-width: 0;
    opacity: .2
}

.c3-chart-arcs-title {
    dominant-baseline: middle;
    font-size: 1.3em
}

.c3-chart-arcs .c3-chart-arcs-background {
    fill: #e0e0e0;
    stroke: none
}

.c3-chart-arcs .c3-chart-arcs-gauge-unit {
    fill: #000;
    font-size: 16px
}

.c3-chart-arcs .c3-chart-arcs-gauge-max, .c3-chart-arcs .c3-chart-arcs-gauge-min {
    fill: #777
}

.c3-chart-arc .c3-gauge-value {
    fill: #000
}

/*axis colors*/

.tick text {
    fill: #f1f1f1;
}

.c3-legend-item text {
    fill: #f1f1f1;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>

<div class="Grid Grid--gutters Grid--cols-2 u-textCenter">
    <div class="Grid-cell">
        <div class="Demo file">
            <h3>Chart 1</h3>
            <div id="chart"></div>
        </div>
    </div>
    <div class="Grid-cell">
        <div class="Demo file">
            <h3>Chart 2</h3>
            <div id="chart2"></div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我仍在努力寻找造成这种情况的原因。我也可以发布不寻常行为的视频。我希望它不是由我的时差造成的。

0 个答案:

没有答案
相关问题
最新问题