D3.js 与 Bootstrap 冲突
D3.js conflict with Boostrap
我在尝试添加 c3js/d3js 图表时遇到上述错误。我正在为这个项目使用 d3 v5。
我也有 bootstrap 3 链接到 html.
<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 似乎与 C3.js 计算图表呈现容器尺寸的方式冲突。这可以通过使用配置参数 size.height
.
覆盖由 C3 确定的隐式高度来解决
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>
我在尝试添加 c3js/d3js 图表时遇到上述错误。我正在为这个项目使用 d3 v5。
我也有 bootstrap 3 链接到 html.
<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 似乎与 C3.js 计算图表呈现容器尺寸的方式冲突。这可以通过使用配置参数 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>