Question

我使用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>

Answer 1

您可以通过应用以下CSS行来更改文本颜色，包括管理字体大小：

.c3-axis-y text {
   fill: red;
   font-size:12px;
}
.c3-axis-x text {
    font-size:12px;
    fill:purple;
}

以下是您可以查看的工作演示代码。

Running DEMO

如何更改c3.js图表中文本的颜色？

1 个答案:

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

1 个答案:

如何更改c3.js图表中文本的颜色？