2017-10-17 3 views
0

Ich zeige Diagramme basierend auf den Daten an. Wenn Daten nicht verfügbar sind, zeigt es leere Diagramme an, die nicht gut aussehen. So Ich versuche, keine Datenoption von c3.js zu verwenden, aber irgendwie funktioniert es nicht für mich.C3.js Nein Datenoption wird nicht angezeigt

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" 
       } 
       } 
      }); 
     } 

Bitte helfen ... von diesem ...

Antwort

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>

dies ist ein einfaches Beispiel empty.label.text in c3.js der Verwendung ...