2016-10-21 10 views
0

私はC3.jsを使用しており、凡例にdata1、data2などのカスタム凡例テキストを表示する必要があります。だから私は名前のプロパティを使用しているが、カスタマイズされた凡例のテキストは表示されません。c3.js custom lend text issue

次は私のコードです:

$scope.chart1 = { 
     size: { 
      height: 175 
       // width: 480 
     }, 
     data: { 
      type: 'pie', 
      columns: [ 
       ['data1', 45], 
       ['data2', 100], 
       ['data3', 60], 
       ['data4', 5] 
      ] 
     }, 
     tooltip: { 

     }, 
     legend: { 
      show: true, 
      position: 'right' 
     }, 
     names: { 
      'data1': 'warning', 
      'data2': 'success', 
      'data2': 'info', 
      'data2': 'danger' 
     } 
    }; 

いずれかのカスタム凡例のテキストを表示するための正しい方法は何か手伝ってくれるか?

+0

http://jsfiddle.net/jrdsxvys/9/ – Mahi

+0

直接そのようなカスタマイズされたテキストを維持せずにこれを達成するための他の可能な方法があります。私はdata1、data2を持っている必要がありますが、表示中に私は '警告'、 '成功'などを表示する必要があります。 –

答えて

1

var chart = c3.generate({ 
 
    padding: { 
 
     top: 10, 
 
     right: 0, 
 
     bottom: 10, 
 
     left: 0, 
 
    }, 
 
    data: { 
 
     columns: [ ['data1', 45], 
 
       ['data2', 100], 
 
       ['data3', 60], 
 
       ['data4', 5]], 
 
     type: 'pie', 
 
     labels: true, 
 
     names:{ 
 
      'data1': 'warning', 
 
      'data2': 'success', 
 
      'data2': 'info', 
 
      'data2': 'danger' 
 
    } 
 
    } 
 
    //But these legend values or not showing 
 

 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id='chart' />

+0

本質的に私は好きではないカスタネットテキストでdata1、data2などを置き換えました。私が探しているのは、たとえば、凡例ごとに色をカスタマイズしたい場合は、colorsプロパティ(http://c3js.org/samples/data_color.html)を使用することができます。同じ方法でカスタマイズすることができます伝説のテキスト。あなたが投稿http://stackoverflow.com/questions/30191582/how-can-i-change-text-of-legend-in-c3-pie-chartを見ると、彼は名前プロパティがこのサンプルコードは機能していません。私はそのような解決策を望んでいます –

+0

@マダスキ私は私の答えを更新しました。 – Mahi

+0

@マダスKこれはあなたが欲しいですか? – Mahi