时间戳

首页 > 解决方案 > D3.js 与 Boostrap 冲突

html - D3.js 与 Boostrap 冲突

问题描述

d3js 错误

我在尝试添加 c3js/d3js 图表时遇到上述错误。我在这个项目中使用 d3 v5。
我也有链接到 html 的引导程序 3。

<head>
<title>Default</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="file:///../Test/Site.css" rel="stylesheet">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.css" rel="stylesheet">
</head>

奇怪的是，如果我删除 bootstrap.min.css 行，该图可以工作，但显然 bootstrap 不起作用。因此冲突。

我能做些什么让他们一起工作？我知道有些项目他们都一起工作，我就是不知道怎么做。

以下代码段演示了该问题：

var jsonObj = [{"ChildId":0,"Year":2019,"Quarter":1,"QuarterShort":"2019 Q1","Revenue":16.57,"Cost":8.69,"PnlPct":52.46,"Em":7.88,"EmPct":47.54,"Cost":7.2,"CostPct":43.45,"Technical":0.05,"TechnicalPct":0.31,"MiscCost":1.44,"MiscCostPct":8.69,"ParentId":0,"RandomId":0,"StartDate":"2019-06-24T00:00:00","WeekId":137,"IsPrev":1},{"ChildId":0,"Year":2019,"Quarter":2,"QuarterShort":"2019 Q2","Revenue":16.8,"Cost":9.39,"PnlPct":55.88,"Em":7.41,"EmPct":44.12,"Cost":7.84,"CostPct":46.67,"Technical":0.12,"TechnicalPct":0.71,"MiscCost":1.43,"MiscCostPct":8.49,"ParentId":0,"RandomId":0,"StartDate":"2019-07-01T00:00:00","WeekId":138,"IsPrev":0}]
$.each(jsonObj, function (key, fp) {
    var curr = fp.StartDate.substr(0, 10);
    fp.StartDate = curr;
    jsonObj[key] = fp;
});
var finChart = c3.generate({
    bindto: '#finpctgraphs',
    padding: {
        left: 50,
        right: 50
    },
    data: {
        json: jsonObj,
        keys: {
            x: 'StartDate',
            value: ['PnlPct', 'CostPct', 'TechnicalPct', 'MiscCostPct']
        },
        labels: true
    },
    axis: {
        x: {
            //type: 'category'
            type: 'timeseries',
            // if true, treat x value as localtime (Default)
            // if false, convert to UTC internally
            localtime: false,
            tick: {
                format: '%d/%m',
                culling: false
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.10.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="file:///../Test/Site.css" rel="stylesheet">
    <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.css" rel="stylesheet">


<div style='border-bottom: 1px solid #000000;border-top: 1px solid #000000;border-right: 1px solid #000000;border-left: 1px solid #000000;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;background-color:#ffffff;color:#000000;display:block;text-align:left;width: 1000px;font-family: Arial, Verdana, sans-serif; font-size: 12px;border-radius:5px;' class='' id='finpctgraphs'></div>

没有 bootstrap.css的工作jsFiddle没有 boostrap.css的
工作jsFiddle

标签： htmld3.jstwitter-bootstrap-3c3.js

解决方案

Bootstrap CSS 似乎与 C3.js 计算呈现图表的容器尺寸的方式相冲突。这可以通过使用配置参数覆盖由 C3 确定的隐式高度来解决size.height。

size: {
  height: 320
}

看看更新的工作演示：

var jsonObj = [{"ChildId":0,"Year":2019,"Quarter":1,"QuarterShort":"2019 Q1","Revenue":16.57,"Cost":8.69,"PnlPct":52.46,"Em":7.88,"EmPct":47.54,"Cost":7.2,"CostPct":43.45,"Technical":0.05,"TechnicalPct":0.31,"MiscCost":1.44,"MiscCostPct":8.69,"ParentId":0,"RandomId":0,"StartDate":"2019-06-24T00:00:00","WeekId":137,"IsPrev":1},{"ChildId":0,"Year":2019,"Quarter":2,"QuarterShort":"2019 Q2","Revenue":16.8,"Cost":9.39,"PnlPct":55.88,"Em":7.41,"EmPct":44.12,"Cost":7.84,"CostPct":46.67,"Technical":0.12,"TechnicalPct":0.71,"MiscCost":1.43,"MiscCostPct":8.49,"ParentId":0,"RandomId":0,"StartDate":"2019-07-01T00:00:00","WeekId":138,"IsPrev":0}]
$.each(jsonObj, function (key, fp) {
    var curr = fp.StartDate.substr(0, 10);
    fp.StartDate = curr;
    jsonObj[key] = fp;
});
var finChart = c3.generate({
    bindto: '#finpctgraphs',
    size: {
      height: 480
    },
    padding: {
        left: 50,
        right: 50
    },
    data: {
        json: jsonObj,
        keys: {
            x: 'StartDate',
            value: ['PnlPct', 'CostPct', 'TechnicalPct', 'MiscCostPct']
        },
        labels: true
    },
    axis: {
        x: {
            //type: 'category'
            type: 'timeseries',
            // if true, treat x value as localtime (Default)
            // if false, convert to UTC internally
            localtime: false,
            tick: {
                format: '%d/%m',
                culling: false
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.10.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="file:///../Test/Site.css" rel="stylesheet">
    <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.css" rel="stylesheet">


<div style='border-bottom: 1px solid #000000;border-top: 1px solid #000000;border-right: 1px solid #000000;border-left: 1px solid #000000;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;background-color:#ffffff;color:#000000;display:block;text-align:left;width: 1000px;font-family: Arial, Verdana, sans-serif; font-size: 12px;border-radius:5px;' class='' id='finpctgraphs'></div>

推荐阅读