css – 如何更改c3.js图表​​中文本的颜色?

前端之家收集整理的这篇文章主要介绍了css – 如何更改c3.js图表​​中文本的颜色?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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",},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>

解决方法

您可以通过应用以下CSS行来更改文本颜色,包括管理字体大小:
.c3-axis-y text {
   fill: red;
   font-size:12px;
}
.c3-axis-x text {
    font-size:12px;
    fill:purple;
}

这是您可以查看的工作演示代码.

Running DEMO

原文链接:/css/215448.html

猜你在找的CSS相关文章