2016-01-09 3 views
0

Может ли кто-нибудь предложить мне способ добавления стиля к заголовку диаграммы пончиков C3.js?Как добавить стиль к заголовку диаграммы donut c3.js

Для любой диаграммы c3 пончика есть ли возможность установить стиль title?

Я использую этот код для диаграммы моего пончика.

var chart = c3.generate({ 
     data: { 
      columns: [ 
       ['Monday', 70], 
       ['TuesDay', 20], 
       ['Wednesday', 30], 
       ['Thursday', 50], 
       ['Friday', 100] 
      ], 
      type: 'donut' 
     }, 
     donut: { 
      title: "Usage " // How to do? style("color", "#59C2E6") 
     } 
    }); 

ответ

2

пончик title использование класса c3-chart-arcs-title по визуализации.

Вы можете просто переопределить c3-chart-arcs-title стиль. Ваш код должен быть как:

.c3-chart-arcs-title { 
    fill: red; 
    font-size: 16px; 
} 
+0

Спасибо. Все нормально. Как вы можете найти стиль 'c3-chart-arcs-title'? Некоторый документ документации C3.js? – LeMoussel

+0

Я финт, что в полной версии c3.js. CLASS.chartArcsTitle – yurzui

+0

https://github.com/masayuki0812/c3/blob/master/c3.js#L5026 – yurzui

0

просто переопределить свойство заполнять .c3-диаграмма-дуг-заголовка класса стиля, например:

<html> 
    <head> 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.css" /> 
    </head> 
    <body> 
    <div id="chart"></div> 

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script src="http://c3js.org/js/c3.min-12912fb6.js"></script> 

<style> 
    .c3-chart-arcs-title { 
         fill: #59C2E6; 
         } 
</style> 
    <script> 
    var chart = c3.generate({ 
     data: { 
      columns: [ 
       ['Monday', 70], 
       ['TuesDay', 20], 
       ['Wednesday', 30], 
       ['Thursday', 50], 
       ['Friday', 100] 
      ], 
      type: 'donut' 
     }, 
     donut: { 
      title: "Usage " // How to do? style("color", "#59C2E6") 

     } 
    }); 
     setTimeout(function() { 
     chart.axis.labels({ 
      x: 'New X Axis Label', 
      y: 'New Y Axis Label', 
      y2: 'New Y2 Axis Label', 
     }); 
     }, 1000); 
     setTimeout(function() { 
     chart.load({ 
      columns: [ 
      ['data1', 100, 300, 600, 200, 400, 500] 
      ] 
     }); 
     chart.axis.labels({y: 'New Y Axis Label Again'}); 
     }, 2000); 
    </script> 
    </body> 
</html>