2017-10-17 8 views
0

データに基づいてグラフを表示しています。データが利用できない場合、それは見栄えの悪い空のグラフを表示しています。 だから 私はc3.jsからデータオプションを使用しようとしていますが、何とかそれは私のために働いていません。C3.jsデータなしオプション表示しない

function chartGenerator(chartId,measuresArray,dimensionArray,xLabel,chartType,criteria) 
     { 
      var chart = c3.generate({ 

       bindto : chartId, 
       data: { 
        columns: measuresArray, 
        type: chartType, 
       empty: { 
          label: { 
           text: "No Data Available" 
          } 
         }, 
        labels: true, 
        rotate: 75, 
        onclick: function(e) { 
         /* alert(e.value); */ 
         //make all the bar opacity 0.1 
         d3.selectAll(".c3-shape").style("opacity",0.3); 
         var k = ".c3-shape-"+ e.index; 
         //make the clicked bar opacity 1 
         d3.selectAll(k).style("opacity",1) 
       d3.select('#'+criteria).property('value', "'"+dimensionArray[e.index]+"'"); 
         changeChartView(); 
         } 
       }, 

       bar: { 
        width: { 
         ratio: 0.25 // this makes bar width 50% of length between ticks 
        } 
       }, 

       axis : { 
        x : { 
         type : 'category', 
         categories : dimensionArray, 
         label : xLabel 
        }, 
       y : { 
        label : "Incident Count" 
       } 
       } 
      }); 
     } 

ここから...助けてください...

答えて

0

c3.generate({ 
 
\t bindto: '#chart', 
 
    data: { 
 
\t \t columns: [ 
 
\t \t ], 
 
    empty: { 
 
    \t \t label: { 
 
     text: "No Data :(" 
 
     } 
 
    } 
 
    } 
 
});
.c3-chart-lines .c3-shapes { 
 
    pointer-events: all !important; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/> 
 
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script> 
 

 
<div id="chart"></div>

が、これはc3.jsでempty.label.textを使用した簡単な例です...

関連する問題