如何在c3 JS图表的加载功能上显示No Data available

时间:2016-06-10 08:10:22

标签: d3.js c3.js

我最初制作的是包含数据的图表,但如果数据在加载函数的图表中不可用,则表示没有数据可用字符串。



var chart = c3.generate({
 bindto: '#chart1',   
 data: {
        columns: [
            ['data1', -30, 200, 200, 400, -150, 250],
            ['data2', 130, 100, -100, 200, -150, 50]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2']
        ],
        empty: { label: { text: "No Data Available" }   }
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});


setTimeout(function () {

    chart.load({
        columns: [
        
        
        ],
        empty: { label: { text: "No Data Available" }   }
    });
    chart.flush();
}, 1500);

<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart1"></div>
&#13;
&#13;
&#13;

如何在加载功能上显示无可用数据?

1 个答案:

答案 0 :(得分:1)

要加载新数据,您需要通过ID来卸载旧数据:

setTimeout(function() {
  chart.load({
    columns: [],
    unload: ['data1', 'data2']//here data1, data2 are your old data ids
  });

chart.flush();
}, 1500);

工作代码here