Как показать c3.js Нет данных, но с легендой для пустой колонки?

Ответ 1

Похоже, что c3 не имеет поведения, которое вы хотите. Я могу предложить вам написать функцию, и в этой функции вы можете проверить, есть ли у вас данные, которые вы создаете диаграмму, обычным способом:

c3.generate(config).load({})

Но если у вас нет данных, вы можете заполнить данные с помощью значений null и добавить элемент с текстом No data available в корневую диаграмму node. Вы можете создать этот текст, и он будет выглядеть как сообщение 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="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css'; return false;" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart'></div>