2017-10-17 78 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的一个简单的例子...