2015-05-12 11 views
7

Jak zmienić tekst legendy na wykresie kołowym? Używam wykresów c3 na mojej stronie php. Przeczytałem już dokumentację wykresów c3, ale bez powodzenia.Jak zmienić tekst legendy na wykresie kołowym c3

Obecnie używam tego kodu, który pokazuje legendę dla true, ale nie mogę zmienić tekstu, który próbowałem to.

var chart = c3.generate({ 
     bindto: '#container', 
     padding: { 
        top: 10, 
        right: 0, 
        bottom: 10, 
        left: 0, 
      }, 
     data: { 
      columns: [<?php echo $pieChartDataString; ?>], 
      type : 'pie', 
      labels: true 
     }, 
     legend: { 
       show: true, 
       position: 'upper-center' 
       format: { 
         title: function() { return "Legend title"; }, 
         name : function() { return "Legend name"; }, 
         value: function() { return "Legend value";} 
         } 
       } 

    //But these legend values or not showing 

    }); 

Nie pokazuje moich wartości legendy, ponieważ zawsze pokazuje tylko kolumny jako legendę.

Czy istnieje sposób na zmianę wartości legendy.

Odpowiedz

9

Nie dostarczyłeś danych, które są wyprowadzane z twojego php, więc trudno powiedzieć.

Ale pierwszy element w każdej z kolumn kolumn określa nazwę, która znajduje się w legendzie. Tak:

columns: [ 
    ['this is legend 1', 30], 
    ['put your value here', 120], 
] 

spowoduje, że etykiety legendy będą "to jest legenda 1" i "wpisz tutaj swoją wartość".

Oto skrzypce: http://jsfiddle.net/jrdsxvys/9/

Edit ... Inną opcją jest użycie nazwy własności, jak to zrobiono tutaj: http://jsfiddle.net/jrdsxvys/40/

data: { 
    columns: [ 
     ['d1', 30], 
     ['d2', 120] 
    ], 
    type: 'pie', 
    labels: true, 
    names: { 
     d1: 'some name here', 
     d2: 'another name' 
    } 
} 
1

@agpt Tak. Właściwość names jest dobrym sposobem, aby przejść ogólnie, ponieważ pierwsza właściwość tablicy danych kolumn, np. "D1" powyżej, jest używana podczas robienia rzeczy, takich jak posiadanie wielu typów na wykresach. na przykład na połączenie baru i linii używając types zamiast type: 'pie':

columns: [ 
    ['bar_1', 3, 8, 6], 
    ['bar_2', 4, 0, 7], 
    ['bar_3', 2, 3, 0] 
], 

types: { 
    bar_1: 'bar', 
    bar_2: 'line', 
    bar_3: 'bar' 
}, 

names : { 
     bar_1: 'Initial', 
     bar_2: '3 month', 
     bar_3: '6 month'     
} 

Tak, za pomocą właściwości nazw pozwala na użycie więcej nazwisk „dynamiczne” własności i być spójne w całej konfiguracji.