Question

我正在根据数据显示图表。如果数据不可用，则显示空图表并不好看。所以我试图使用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"
                }
                }
            });
        }

请帮助......从这......

Answer 1

c3.generate({
	bindto: '#chart',
  data: {
		columns: [
		],
    empty: {
   		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的一个简单示例

C3.js无数据选项不显示

1 个答案: