我正在使用c3.js创建线条和条形图.我想更改x轴和y轴值的颜色.因为我想要图表的黑色背景,所以x轴和y轴上的文本/值颜色必须是白色才能看到.
我尝试过使用下面的CSS,但它不起作用.
我尝试过使用下面的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",},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>
解决方法
@H_301_15@ 您可以通过应用以下CSS行来更改文本颜色,包括管理字体大小:.c3-axis-y text { fill: red; font-size:12px; } .c3-axis-x text { font-size:12px; fill:purple; }
这是您可以查看的工作演示代码.