时间戳

首页 > 解决方案 > 当数据具有 NULL 值时，Highcharts 不会在 Xaxis 上显示年份

highcharts - 当数据具有 NULL 值时，Highcharts 不会在 Xaxis 上显示年份

问题描述

当有另一个只有 NULL 值的系列时，我遇到了 Highcharts 不想在我的柱形图中显示年份的问题。它只显示“1,2,3,4...”而不是“2000,2001,2002,....”。该系列的数据正在动态生成 - 并且应该出现在图例中。看起来像这样： 在此处输入图像描述

如果我删除 »empty« 系列，它会正确显示。所以，不知何故，它也许必须考虑第二个（»empty«）系列而不是第一个？

$(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/

有什么提示吗？

标签： highchartsnullaxis

解决方案

问题是您没有设置类别，也没有在代码中的任何地方跟踪它们，据我所知。如何解决这个问题有很多选择。我更喜欢向数据点添加类别。可以这样做（只显示你的最后一个 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();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<pre id="csv" style="display:none">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
</pre>

解决问题的其他方法是将类别添加到 xAxis，或设置pointStart. 但是，我上面显示的方式将解释具有不同日期的多个系列。

工作 JSFiddle 示例： https ://jsfiddle.net/ewolden/t3sxmvub/8/

推荐阅读