如何显示 c3.js 没有数据，但有空列的图例？

Posted 2023-02-22

【中文标题】如何显示 c3.js 没有数据，但有空列的图例？

【英文标题】：How to show c3.js No data but with legend for empty column?

【发布时间】：2018-05-22 13:34:12

【问题描述】：

我已设法在我的图表上显示“无可用数据消息”。但麻烦的是，即使没有数据，我也想用数据名称显示图例。

如果值为空，“无数据”消息将消失。如果没有数据，会出现消息，但图例会消失。

var chart = c3.generate(
  data: 
    bindto: "#chart",
    x: 'x',
    columns: [
      ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
      //Uncomment to see the legend ['data1', null, null, null, null, null, null] 
      ['data1'] //Comment out to see the legend
    ],
    empty: 
      label: 
        text: "No Data Available"
      
    
  ,
  axis: 
    x: 
      type: 'timeseries',
      tick: 
        format: '%Y-%m-%d'
      
    
  
);
chart.load();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
<div id='chart'></div>

【参考方案1】：

看起来 c3 没有您想要的行为。我可以建议你编写函数，在这个函数中，你可以检查你是否有数据以正常方式创建图表：

c3.generate(config).load()

但是，如果您没有数据，您可以使用 null 值填充数据并将带有文本 No data available 的元素附加到根图表节点。您可以设置此文本的样式，它看起来就像空数据的默认 c3 消息：

function createC3ChartWithConfig(config) 
  if (config.data.columns[1].length < 2)  // if data not exist
    const lengthOfTicks = config.data.columns[0].length - 1;

    for (var i = 0; i < lengthOfTicks; i++) 
      config.data.columns[1].push(null)
    

    var chart = c3.generate(config);

    chart.load()

    var element = document.createElement('div');

    element.setAttribute('class', 'message');
    element.innerText = 'No data available';
    chart.element.appendChild(element)
   else 
    c3.generate(config).load()
  

查看下面的演示。首先是没有数据的配置：

  data: 
    bindto: "#chart",
    x: 'x',
    columns: [
      ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
      ['data1'] // data is empty
    ],
  ,
  axis: 
    x: 
      type: 'timeseries',
      tick: 
        format: '%Y-%m-%d'
      
    
  

var config = 
  data: 
    bindto: "#chart",
    x: 'x',
    columns: [
      ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
      //['data1', 6, 4, 5, 5, 5, 5] 
      ['data1'] //Comment out to see the legend
    ],
  ,
  axis: 
    x: 
      type: 'timeseries',
      tick: 
        format: '%Y-%m-%d'
      
    
  


function createC3ChartWithConfig(config) 
  if (config.data.columns[1].length < 2)  // if data not exist
    const lengthOfTicks = config.data.columns[0].length - 1;

    for (var i = 0; i < lengthOfTicks; i++) 
      config.data.columns[1].push(null)
    

    var chart = c3.generate(config);

    chart.load()

    var element = document.createElement('div');

    element.setAttribute('class', 'message');
    element.innerText = 'No data available';
    chart.element.appendChild(element)
   else 
  	c3.generate(config).load()
  


createC3ChartWithConfig(config);

.message 
  position: absolute;
  top: 120px;
  width: 100%;
  font-size: 2em;
  font-family: sans-serif;
  color: #808080;
  text-align: center;

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart'></div>

第二个用于配置数据：

  data: 
    bindto: "#chart",
    x: 'x',
    columns: [
      ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
      ['data1', 6, 4, 5, 4, 5, 2] 
    ],
  ,
  axis: 
    x: 
      type: 'timeseries',
      tick: 
        format: '%Y-%m-%d'
      
    
  

var config = 
  data: 
    bindto: "#chart",
    x: 'x',
    columns: [
      ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
      ['data1', 6, 4, 5, 4, 5, 2] 
    ],
  ,
  axis: 
    x: 
      type: 'timeseries',
      tick: 
        format: '%Y-%m-%d'
      
    
  


function createC3ChartWithConfig(config) 
  if (config.data.columns[1].length < 2)  // if data not exist
    const lengthOfTicks = config.data.columns[0].length - 1;

    for (var i = 0; i < lengthOfTicks; i++) 
      config.data.columns[1].push(null)
    

    var chart = c3.generate(config);

    chart.load()

    var element = document.createElement('div');

    element.setAttribute('class', 'message');
    element.innerText = 'No data available';
    chart.element.appendChild(element)
   else 
  	c3.generate(config).load()
  


createC3ChartWithConfig(config);

.message 
  position: absolute;
  top: 120px;
  width: 100%;
  font-size: 2em;
  font-family: sans-serif;
  color: #808080;
  text-align: center;

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart'></div>