javascript - 如果值为 0，Highcharts 不应绘制图表

Question

我正在使用 Highcharts，它会报告全年情况。

我只有到 7 月的数据(因为从今天开始就是 7 月)，但是当我绘制图表时，它会绘制到 12 月，值为 0(8 月到 12 月)。

我不想在 12 月之前绘制图表，我只想在 7 月之前绘制图表。

$(function() {
  var colors = [
    '#4572A7',
    '#AA4643',
    '#89A54E',
    '#80699B',
    '#3D96AE',
    '#DB843D',
    '#92A8CD',
    '#A47D7C',
    '#B5CA92'
  ];

  var applyGradient = function(color) {
    return {
      radialGradient: {
        cx: 0.5,
        cy: 0.3,
        r: 0.7
      },
      stops: [
        [0, color],
        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')]
      ]
    };
  };

  $('#container').highcharts({
    colors: colors,
    title: {
      text: 'Points with zero value are not connected by line'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      offset: 0,
    },

    plotOptions: {
      series: {
        connectNulls: true
      }
    },
    yAxis: {
      min: 0,
    },
    series: [{
        data: [2, 10, 40, 40, 40, 40, 30, 0, 0, 0, 0, 0]
      },
    ]
  });

  colors = $.map(colors, applyGradient);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 300px"></div>

实时从 SQL 查询中获取值，对于这个 fiddle ，我只保留静态值

Answer 1

要做这样的事情，您可以只从数据库返回您需要的数据，也可以在 JavaScript 中动态处理它。

以下内容获取数据和类别数据，并在图表的实际初始化之外对其进行处理:

//Original values
var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var data = [2, 10, 40, 40, 40, 40, 30, 0, 0, 0, 0, 0]

//New arrays to store data to be displayed
var currentCategories = []
var currentData = [];

//Get current month to provide a cut-off
var currentMonth = new Date().getMonth();

//Loop through the data and add the value for each month to the data array and category array
for(var i = 0; i < categories.length; i++){
    if(currentMonth >= i){//Alternatively at this point you could exclude the values if data[i] == 0
        currentCategories.push(categories[i]);
        //Arrays may be different lengths.
        if(data.length >= (i+1)){
            currentData.push(data[i]);
        }
    }
}

虽然您可以只排除 0 个值。如果它们的值为 0，您可能会损失今年早些时候的几个月。根据您提供的数据，仅删除当月之后的值的风险较小。

然后，您可以使用这些创建的变量在 HighChart 中设置数据:

$('#container').highcharts({
    colors: colors,
    title: {
      text: 'Points with zero value are not connected by line'
    },
    xAxis: {
      categories: currentCategories, //Use processed list of categories
      offset: 0,
    },

    plotOptions: {
      series: {
        connectNulls: true
      }
    },
    yAxis: {
      min: 0,
    },
    series: [{
        data: currentData //Use processed array of data
      },
    ]
  });