我正在尝试构建图表，但是我看到开始时的起始数据标签被切断。不知道原因是什么。我尝试使用填充解决方案，但似乎不起作用。
我的代码基于C3JS库。
我的X轴填充是：
填充：{ 顶部：0， 底部：0， 左：0 }
和y轴填充：
填充：{ 顶部：0， 底部：0， 左：0， 右：0 }
我的小提琴：https：//jsfiddle.net/sourabhtewari/8uz8j01j/371/
我的代码：
var stuff = [{
"year": 2015,
"month": 12,
"s1": 0.38,
"s2": 100,
"s3": 22.2,
"s4": 61,
"s5": -7,
},
{
"year": 2016,
"month": 1,
"s1": 0.39,
"s2": 101,
"s3": 22.12,
"s4": 62,
"s5": -6.0,
},
{
"year": 2016,
"month": 2,
"s1": 0.43,
"s2": 102,
"s3": 22.11,
"s4": 65,
"s5": -5.7,
},
{
"year": 2016,
"month": 3,
"s1": 0.40,
"s2": 103,
"s3": 22.07,
"s4": 63,
"s5": -5.3,
},
{
"year": 2016,
"month": 4,
"s1": 0.39,
"s2": 104,
"s3": 22.04,
"s4": 61,
"s5": -7.0,
},
{
"year": 2016,
"month": 5,
"s1": 0.38,
"s2": 105,
"s3": 22.2,
"s4": 56,
"s5": -11.3,
},
{
"year": 2016,
"month": 6,
"s1": 0.38,
"s2": 106,
"s3": 22.05,
"s4": 56,
"s5": -12.8,
},
{
"year": 2016,
"month": 7,
"s1": 0.37,
"s2": 102,
"s3": 22.7,
"s4": 58,
"s5": -9.7,
},
{
"year": 2016,
"month": 8,
"s1": 0.37,
"s2": 105,
"s3": 21.20,
"s4": 53,
"s5": -6.2,
},
{
"year": 2016,
"month": 9,
"s1": 0.35,
"s2": 108,
"s3": 20.52,
"s4": 64,
"s5": -5.3,
},
{
"year": 2016,
"month": 10,
"s1": 0.37,
"s2": 103,
"s3": 20.92,
"s4": 62,
"s5": -3.3,
},
{
"year": 2016,
"month": 11,
"s1": 0.36,
"s2": 107,
"s3": 21.11,
"s4": 51,
"s5": -5.7,
},
{
"year": 2016,
"month": 12,
"s1": 0.37,
"s2": 114,
"s3": 22.08,
"s4": 56,
"s5": -8.3,
},
{
"year": 2017,
"month": 1,
"s1": 0.35,
"s2": 103,
"s3": 22.07,
"s4": 56,
"s5": -7.2,
},
{
"year": 2017,
"month": 2,
"s1": 0.36,
"s2": 108,
"s3": 22.2,
"s4": 63,
"s5": -9.0,
},
{
"year": 2017,
"month": 3,
"s1": 0.37,
"s2": 96,
"s3": 25.67,
"s4": 62,
"s5": -9.4,
},
{
"year": 2017,
"month": 4,
"s1": 0.38,
"s2": 102,
"s3": 21.94,
"s4": 63,
"s5": -9.5,
},
{
"year": 2017,
"month": 5,
"s1": 0.35,
"s2": 114,
"s3": 22.07,
"s4": 61,
"s5": -9.0,
},
{
"year": 2017,
"month": 6,
"s1": 0.36,
"s2": 103,
"s3": 21.51,
"s4": 54,
"s5": -9.7,
},
{
"year": 2017,
"month": 7,
"s1": 0.36,
"s2": 107,
"s3": 22.2,
"s4": 65,
"s5": -11.3,
},
{
"year": 2017,
"month": 8,
"s1": 0.35,
"s2": 108,
"s3": 20.2,
"s4": 61,
"s5": -12.8,
},
{
"year": 2017,
"month": 9,
"s1": 0.36,
"s2": 103,
"s3": 22.15,
"s4": 50,
"s5": -8,
},
{
"year": 2017,
"month": 10,
"s1": 0.37,
"s2": 112,
"s3": 22.07,
"s4": 65,
"s5": -9,
},
];
var colors = {
data1: '#ff6666',
data2: '#737575',
data3: '#27A5CF',
data4: '#C9BC22',
data5: '#4D4B39',
default: '#000000'
};
var filterShade = {
data1: '#ff666685',
data2: '#73757587',
data3: '#27a5cf87',
data4: '#c9bc228f',
data5: '#4d4b3985',
default: '#000000'
}
var xAxisDates = [];
xAxisDates.push('x')
for (var i = 0; i < stuff.length; ++i) {
xAxisDates.push(stuff[i]["year"] + '-' + stuff[i]["month"] + '-1');
}
var factor = {
s1: 10,
s2: 0.08,
s3: 0.52,
s4: 0.18,
s5: 20
};
var vals1 = [];
vals1.push('data1');
for (var i = 0; i < stuff.length; ++i) {
vals1.push(stuff[i]["s1"] * factor.s1)
};
var vals2 = [];
vals2.push('data2');
for (var i = 0; i < stuff.length; ++i) {
vals2.push(stuff[i]["s2"] * factor.s2)
};
var vals3 = [];
vals3.push('data3');
for (var i = 0; i < stuff.length; ++i) {
vals3.push(stuff[i]["s3"] * factor.s3)
};
var vals4 = [];
vals4.push('data4');
for (var i = 0; i < stuff.length; ++i) {
vals4.push(stuff[i]["s4"] * factor.s4)
};
var vals5 = [];
vals5.push('data5');
for (var i = 0; i < stuff.length; ++i) {
vals5.push((stuff[i]["s5"] + factor.s5))
};
var chart = c3.generate({
size: {
width: 2000,
height: 1000
},
legend: {
show: false
},
data: {
onmouseover: onMouseover,
onmouseout: onMouseout,
type: 'spline',
groups: [
['data1', 'data2', 'data3', 'data4', 'data5']
],
order: null,
x: 'x',
columns: [xAxisDates, vals1, vals2, vals3, vals4, vals5],
labels: {
format: {
data1: function(value, id, i, j) {
return value / factor.s1 + "%"
},
data2: function(value, id, i, j) {
return Math.round(value / factor.s2);
},
data3: function(value, id, i, j) {
return value / factor.s3 + "%"
},
data4: function(value, id, i, j) {
return Math.round(value / factor.s4) + "%"
},
data5: function(value, id, i, j) {
return (value - factor.s5).toFixed(1);
}
}
},
colors: {
data1: colors.data1,
data2: colors.data2,
data3: colors.data3,
data4: colors.data4,
data5: colors.data5,
}
},
tooltip: {
show: false,
format: {
value: function(value, ratio, id) {
if (id == 'data1') {
return value / factor.s1 + "%";
}
if (id == 'data2') {
return (value / factor.s2).toFixed(2);
}
if (id == 'data3') {
return value / factor.s3 + "%";
}
if (id == 'data4') {
return Math.round(value / factor.s4) + "%"
}
if (id == 'data5') {
return (value - factor.s5).toFixed(1);
}
}
},
},
axis: {
y: {
min: 0,
max: 60,
padding: {
top: 0,
bottom: 0,
left: 0,
right: 0
}
},
x: {
type: 'timeseries',
padding: {
top: 0,
bottom: 0,
left: 0
},
tick: {
values: ['2015-12-01', '2016-02-01', '2016-04-01', '2016-06-01', '2016-08-01', '2016-10-01', '2016-12-01', '2017-02-01', '2017-04-01', '2017-06-01', '2017-08-01', '2017-10-01'],
format: "%b-%y",
}
}
},
grid: {
x: {
lines: [
{value: '2017-06-01', text: 'June 17'}
]
}
},
padding: {
right: 30,
left: 80,
top: 80
},
point: {
show: false
}
});
d3.select("svg").append("foreignObject")
.attr("x", -20)
.attr("width", 200)
.style("text-anchor", "left")
//.append("xhtml:body")
.style("font", "14px 'Calibri'")
.style("text-align", "center")
.style("line-height", "0.2")
.html("<h3>ABC Approval of</h3></b><h3>need for speed Strategy</h3></b><h3>(Dec-15)</h3>");
d3.select("svg").append("circle")
.attr("class", "xyZero")
.attr("cx", 80)
.attr("cy", 970)
.attr("r", 6);
d3.select("svg").append("circle")
.attr("class", "data1")
.attr("cx", 40)
.attr("cy", 920)
.attr("r", 30)
.attr("fill", colors.data1);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 920)
.attr('class', 'dataLabel')
.attr("width", 200)
.html("Data 1<sup>1</sup>");
d3.select("svg").append("circle")
.attr("class", "data2")
.attr("cx", 40)
.attr("cy", 800)
.attr("r", 30)
.attr("fill", colors.data2);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 800)
.attr('class', 'dataLabel')
.attr("width", 200)
.html("Data 2<sup>1</sup>");
d3.select("svg").append("circle")
.attr("class", "data3")
.attr("cx", 40)
.attr("cy", 620)
.attr("r", 30)
.attr("fill", colors.data3);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 620)
.attr('class', 'dataLabel')
.attr("width", 200)
.html("Data 3<sup>1</sup>");
d3.select("svg").append("circle")
.attr("class", "data4")
.attr("cx", 40)
.attr("cy", 470)
.attr("r", 30)
.attr("fill", colors.data4);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 470)
.attr('class', 'dataLabelBlack')
.attr("width", 200)
.html("Data 4<sup>1</sup>");
d3.select("svg").append("circle")
.attr("class", "data5")
.attr("cx", 40)
.attr("cy", 280)
.attr("r", 30)
.attr("fill", colors.data5);
d3.select("svg").append("foreignObject")
.attr("x", -60)
.attr("y", 280)
.attr('class', 'dataLabel')
.attr("width", 200)
.html("Data 5<sup>1</sup>");
console.log(d3.select("svg defs"));
var data1 = d3.select("svg defs").append("filter")
.attr("id", "filter1")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data1)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter1 = d3.select("#filter1")
.append('feComposite')
.attr('in', 'SourceGraphic');
var data2 = d3.select("svg defs").append("filter")
.attr("id", "filter2")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data2)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter2 = d3.select("#filter2")
.append('feComposite')
.attr('in', 'SourceGraphic');
var data3 = d3.select("svg defs").append("filter")
.attr("id", "filter3")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data3)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter3 = d3.select("#filter3")
.append('feComposite')
.attr('in', 'SourceGraphic');
var data4 = d3.select("svg defs").append("filter")
.attr("id", "filter4")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data4)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter4 = d3.select("#filter4")
.append('feComposite')
.attr('in', 'SourceGraphic');
var data5 = d3.select("svg defs").append("filter")
.attr("id", "filter5")
.attr("height", "130%")
.append('feFlood')
.attr('flood-color', filterShade.data5)
.append('feComposite').append('feComposite')
.attr('in', 'SourceGraphic');
var filter1 = d3.select("#filter5")
.append('feComposite')
.attr('in', 'SourceGraphic');
function onMouseover(elemData) {
var id = elemData.name;
if (id == undefined) id = elemData.id;
var el = d3.select('.c3-chart-texts')
.selectAll(".c3-chart-text > .c3-texts-" + id + " > .c3-text-" + elemData.index);
if (id == 'data1')
el.attr('filter', 'url(#filter1)');
if (id == 'data2')
el.attr('filter', 'url(#filter2)');
if (id == 'data3')
el.attr('filter', 'url(#filter3)');
if (id == 'data4')
el.attr('filter', 'url(#filter4)');
if (id == 'data5')
el.attr('filter', 'url(#filter5)');
}
function onMouseout(elemData) {
var id = elemData.name;
if (id == undefined) id = elemData.id;
var el = d3.select('.c3-chart-texts')
.selectAll(".c3-chart-text > .c3-texts-" + id + " > .c3-text-" + elemData.index);
el.attr('filter', '')
}
也为x轴使用最小/最大配置：
x: {
type: 'timeseries',
min: '2015-11-01',
max: '2017-11-01',
...
}