轴旋转时无法旋转 y 轴刻度文本
Can't rotate y-axis tick text when axis is rotated
我正在尝试沿图表底部旋转轴刻度。我可以很好地旋转 x 轴刻度,但是一旦我旋转轴本身,那么底部的轴在技术上被认为是 y 轴,我不能再旋转刻度。
我希望条形图从左到右穿过,我希望底部的刻度线倾斜。
如有任何帮助,我们将不胜感激。
var day1 = new Date();
day1.setDate(day1.getDate() - 7);
var day2 = new Date();
day2.setDate(day2.getDate() - 6);
var day3 = new Date();
day3.setDate(day3.getDate() - 5);
var day4 = new Date();
day4.setDate(day4.getDate() - 4);
var day5 = new Date();
day5.setDate(day5.getDate() - 3);
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', day1, day2, day3, day4, day5],
['data1', 30, 200, 100, 400, 150, 250]
],
type: 'bar'
},
axis: {
rotated: true,
x: {
type: 'timeseries',
tick: {
format: '%m-%d',
rotate: 75
}
},
y: {
tick: {
rotate: 75
}
}
}
});
嗯。您可能必须使用 D3 自己手动定位 x 刻度。
类似于示例中的内容。
var day1 = new Date();
day1.setDate(day1.getDate() - 7);
var day2 = new Date();
day2.setDate(day2.getDate() - 6);
var day3 = new Date();
day3.setDate(day3.getDate() - 5);
var day4 = new Date();
day4.setDate(day4.getDate() - 4);
var day5 = new Date();
day5.setDate(day5.getDate() - 3);
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', day1, day2, day3, day4, day5],
['data1', 30, 200, 100, 400, 150, 250]
],
type: 'bar'
},
axis: {
rotated: true,
x: {
type: 'timeseries',
tick: {
format: '%m-%d',
rotate: 75
}
},
y: {
tick: {
rotate: 75
}
}
}
});
$("button").click(function(){
d3.selectAll(".c3-axis-y text").attr("transform", "rotate(75)").attr("y", -1).attr("x", 0).style("text-anchor", "start").style("display", "block");
d3.selectAll(".c3-axis-y tspan").attr("x", 0).attr("dy", ".71em").attr("dx", 7.72)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<button>Reposition</button>
<div id='chart' />
我正在尝试沿图表底部旋转轴刻度。我可以很好地旋转 x 轴刻度,但是一旦我旋转轴本身,那么底部的轴在技术上被认为是 y 轴,我不能再旋转刻度。
我希望条形图从左到右穿过,我希望底部的刻度线倾斜。
如有任何帮助,我们将不胜感激。
var day1 = new Date();
day1.setDate(day1.getDate() - 7);
var day2 = new Date();
day2.setDate(day2.getDate() - 6);
var day3 = new Date();
day3.setDate(day3.getDate() - 5);
var day4 = new Date();
day4.setDate(day4.getDate() - 4);
var day5 = new Date();
day5.setDate(day5.getDate() - 3);
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', day1, day2, day3, day4, day5],
['data1', 30, 200, 100, 400, 150, 250]
],
type: 'bar'
},
axis: {
rotated: true,
x: {
type: 'timeseries',
tick: {
format: '%m-%d',
rotate: 75
}
},
y: {
tick: {
rotate: 75
}
}
}
});
嗯。您可能必须使用 D3 自己手动定位 x 刻度。
类似于示例中的内容。
var day1 = new Date();
day1.setDate(day1.getDate() - 7);
var day2 = new Date();
day2.setDate(day2.getDate() - 6);
var day3 = new Date();
day3.setDate(day3.getDate() - 5);
var day4 = new Date();
day4.setDate(day4.getDate() - 4);
var day5 = new Date();
day5.setDate(day5.getDate() - 3);
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', day1, day2, day3, day4, day5],
['data1', 30, 200, 100, 400, 150, 250]
],
type: 'bar'
},
axis: {
rotated: true,
x: {
type: 'timeseries',
tick: {
format: '%m-%d',
rotate: 75
}
},
y: {
tick: {
rotate: 75
}
}
}
});
$("button").click(function(){
d3.selectAll(".c3-axis-y text").attr("transform", "rotate(75)").attr("y", -1).attr("x", 0).style("text-anchor", "start").style("display", "block");
d3.selectAll(".c3-axis-y tspan").attr("x", 0).attr("dy", ".71em").attr("dx", 7.72)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<button>Reposition</button>
<div id='chart' />