Highcharts не должен рисовать график, если значение равно 0

Question

Я использую Highcharts, и он сообщает за весь год.

У меня есть данные только до июля (так как это июль с сегодняшнего дня), но когда я строю график, он строит график до декабря со значением 0 (с августа по декабрь).

Я не хочу строить график до декабря, и я хочу строить только до июля.

$(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, и для этой скрипки я просто сохранил статические значения

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
      },
    ]
  });