我使用c3.js创建线条和条形图.我想更改x轴和y轴值的颜色.因为我想要图表的黑色背景,所以x轴和y轴上的文本/值颜色必须是白色才能看到.我尝试过使用下面的CSS,但它不起作用.
#chart .c3-text
{
color: white;
}
#chart c3-axis-axis
{
color:white;
}
#chart c3-text
{
color:white;
}
有没有办法改变图表上的文字颜色？
编辑 HTML代码:
<body>
<center>
<div id="chart" style="width: 1000px; height: 500px;"></div>
</center>
<script src="../../css/d3.v3.min.js" charset="utf-8"></script>
<script src="../../css/c3.js"></script>
<script>
$(document).ready(function() {
// alert("in ajax");
$.ajax({
type : "post",
url : "../../GetMonthlyTickets",
success : function(result) {
var critical = result.critical;
var warning = result.warning;
var notif = result.notification;
critical.unshift("Critical");
warning.unshift("Warning");
notif.unshift("Notification");
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', '2015-05-01', '2015-06-01','2015-07-01', '2015-08-01'],
critical,
warning,
notif
],
onclick: function (d, element) { console.log("onclick", d, element); },
onmouseover: function (d) { console.log("onmouseover", d); },
onmouseout: function (d) { console.log("onmouseout", d); },
},
color: {
pattern: ['#FF0000', '#FFCC00', '#33CC33']
},
axis: {
x: {
label: 'Tickets',
type: 'timeseries',
height: 20,
tick: {
fit: true,
format: "%b" //format: "%e %b %y"
}
},
y: {
label: 'Score'
}
},
grid: {
x: {
show: true
},
y: {
show: true
}
},
size: {
height: 400,
width: 1000
},
zoom:
{
enabled: true
}
});
}
});
});
</script>
</body>
Him*_*ara 18
您可以通过应用以下CSS行来更改文本颜色,包括管理字体大小:
.c3-axis-y text {
fill: red;
font-size:12px;
}
.c3-axis-x text {
font-size:12px;
fill:purple;
}这是您可以查看的工作演示代码.