Highcharts не отображает годы на Xaxis, когда данные со значениями NULL

Question

У меня проблема с Highcharts, не желающими отображать годы в моем столбчатом графике, когда есть другой ряд с только значениями NULL.Он просто отображает «1,2,3,4 ...» вместо «2000,2001,2002, ....».Данные для серии создаются на лету - и должны появиться в легенде.Тогда это выглядит так:

Если я удаляю «пустую» серию, она отображается правильно.Итак, каким-то образом, возможно, следует рассмотреть второй (»пустой«) ряд вместо первого?

$(document).ready(function()
{
    var options =
    {
        chart:
        {
            renderTo: 'container',
            type: 'column',
            marginTop: 70,
            zoomType:'xy',
            marginBottom: 85,
            events:
            {
                load: function ()
                {
                    var chart = this,
                    yAxis = chart.yAxis[0],
                    firstLabel = yAxis.ticks[yAxis.tickPositions[0]].labelBBox.width,
                    lastLabel = yAxis.ticks[yAxis.tickPositions[yAxis.tickAmount - 1]].labelBBox.width,
                    bb = yAxis.axisTitle.getBBox();
                    yAxis.update
                    ({
                        title: 
                        {
                            offset: -bb.width + 20 + (firstLabel > lastLabel ? firstLabel : lastLabel) //make sure that will be enough space for yAxis labels
                        }
                    });
                }
            }
        },
        xAxis:
        {
            categories:[],
            tickInterval: 1,
            tickLength: 0,
            showLastLabel: true
        },
        legend:
        {
            layout: 'horizontal',
            backgroundColor: '#FFFFFF',
            borderColor: '#EEE',
            floating: false,
            align: 'center',
            x: 0,
            verticalAlign: 'bottom',
            y: -20
        },
        plotOptions:
        {   
            series:
            {
                lineWidth: 2,
                shadow: false,
                marker:
                {
                    enabled: false
                }
            }
        },
        series: []
    };


    $.get('data.csv', function(data)
    {
        // Split the lines
        var lines = data.split('\n');
        $.each(lines, function(lineNo, line)
        {
            var items = line.split(',');

            // header line containes series name
            if (lineNo === 0)
            {
                $.each(items, function(itemNo, item)
                {
                    if (itemNo > 0)
                    {
                        if (item == 'xxx')
                        {
                            options.series.push(
                            {
                                name:item,
                                lineWidth: 5, 
                                data:[],
                                connectNulls: true
                            });
                        }
                        else
                        {
                            options.series.push(
                            {
                                name:item,
                                data:[],
                                connectNulls: true
                            });
                        }
                    }
                });
            }
            // the rest of the lines contain data with their name in the first position
            else
            {
                $.each(items, function(itemNo, item)
                {
                    if(itemNo == 0)
                    {
                                                            }
                    else if (item == "null")
                    {
                        options.series[itemNo-1].data.push(null);
                    }
                    else
                    {
                        options.series[itemNo-1].data.push(parseFloat(item));
                    }
                });
            }
        });

        var chart = new Highcharts.Chart(options);
    });
});

Данные CSV:

Years,Africa,World (No data available)
2000,14.3405162298653740,null
2001,null,null
2002,null,null
2003,23.1953563661334879,null
2004,null,null
2005,null,null
2006,null,null
2007,11.9915962677369679,null

Демонстрация jsfiddle работает (к сожалению) правильно.https://jsfiddle.net/luftikus143/en2bmutp/3/

Есть подсказки?

Answer 1

Проблема в том, что вы не устанавливаете категории или не отслеживаете их где-либо в своем коде, насколько я вижу.Есть много вариантов, как вы можете решить эту проблему.Я предпочитаю добавлять категории к точкам данных.Что можно сделать следующим образом (показывается только ваше последнее предложение else):

else {
  var currentX = 0; //Added this
  $.each(items, function(itemNo, item) {
    if (itemNo == 0) {
      currentX = parseInt(item) //Added this to get year
    } else if (item == "null") {
      options.series[itemNo - 1].data.push({
        x: currentX, //added object
        y: null
      }); //Added object
    } else {
      options.series[itemNo - 1].data.push({
        x: currentX,  //added object
        y: parseFloat(item)
      }); 
    }
  });
}

$(document).ready(function() {
  var options = {
    chart: {
      renderTo: 'container',
      type: 'column',
      marginTop: 70,
      zoomType: 'xy',
      marginBottom: 85,
      events: {
        load: function() {
          var chart = this,
            yAxis = chart.yAxis[0],
            firstLabel = yAxis.ticks[yAxis.tickPositions[0]].labelBBox.width,
            lastLabel = yAxis.ticks[yAxis.tickPositions[yAxis.tickAmount - 1]].labelBBox.width,
            bb = yAxis.axisTitle.getBBox();
          yAxis.update({
            title: {
              offset: -bb.width + 20 + (firstLabel > lastLabel ? firstLabel : lastLabel) //make sure that will be enough space for yAxis labels
            }
          });
        }
      }
    },
    xAxis: {
      categories: [],
      tickInterval: 1,
      tickLength: 0,
      showLastLabel: true
    },
    legend: {
      layout: 'horizontal',
      backgroundColor: '#FFFFFF',
      borderColor: '#EEE',
      floating: false,
      align: 'center',
      x: 0,
      verticalAlign: 'bottom',
      y: -20
    },
    plotOptions: {
      series: {
        lineWidth: 2,
        shadow: false,
        marker: {
          enabled: false
        }
      }
    },
    series: []
  };

  function addSeries() {
    var data = document.getElementById('csv').innerHTML
    // Split the lines
    var lines = data.split('\n');
    $.each(lines, function(lineNo, line) {
      var items = line.split(',');

      // header line containes series name
      if (lineNo === 0) {
        $.each(items, function(itemNo, item) {
          if (itemNo > 0) {
            if (item == 'xxx') {
              options.series.push({
                name: item,
                lineWidth: 5,
                data: [],
                connectNulls: true
              });
            } else {
              options.series.push({
                name: item,
                data: [],
                connectNulls: true
              });
            }
          }
        });
      }
      // the rest of the lines contain data with their name in the first position
      else {
        var currentX = 0; //Added this
        $.each(items, function(itemNo, item) {
          if (itemNo == 0) {
            currentX = parseInt(item) //Added this
          } else if (item == "null") {
            options.series[itemNo - 1].data.push({
              x: currentX,
              y: null
            }); //Added object
          } else {
            options.series[itemNo - 1].data.push({
              x: currentX,
              y: parseFloat(item)
            }); //added object
          }
        });
      }
    });
    console.log(options)
    var chart = new Highcharts.Chart(options);
  }
  addSeries();
});

Years,Africa,World (No data available)
2000,14.3405162298653740,null
2001,null,null
2002,null,null
2003,23.1953563661334879,null
2004,null,null
2005,null,null
2006,null,null
2007,11.9915962677369679,null

Другими способами решения проблемы является добавление категорий в xAxis или настройка pointStart.Однако способ, который я показал выше, будет учитывать несколько серий с разными датами.

Рабочий пример JSFiddle: https://jsfiddle.net/ewolden/t3sxmvub/8/