Question

当存在另一个只有NULL值的序列时，Highcharts不想在柱形图中显示年份时遇到问题。它只显示“ 1,2,3,4 ...”而不是“ 2000,2001,2002，....”。该系列的数据是即时生成的-应该出现在图例中。然后看起来像这样：

如果我删除“空”系列，则可以正确显示。因此，以某种方式，它可能必须考虑第二个（»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/

有任何提示吗？

Answer 1

问题是您没有设置类别，或者就我所知，没有在代码中的任何位置跟踪它们。有许多解决方法。我更喜欢为数据点添加类别。可以这样完成（仅显示您的last 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/

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

1 个答案: