Как скрыть пустой столбец в столбце hightcharts с несколькими рядами

У меня есть несколько рядов для рендеринга в столбце, но в некотором столбце есть нулевое значение, а на диаграмме осталось пробел для пустого столбца. Как можно скрыть/удалить пустой столбец, такие как категории 2 по 15 июня в этом примере: JSFILLDE Как скрыть пустой столбец в столбце hightcharts с несколькими рядами

$('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Stacked bar chart' 
    }, 
    xAxis: { 
     type: 'datetime', 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Testing' 
     } 
    }, 
    series: [{ 
     name: 'Category I', 
     data: [ 
      [Date.UTC(2014, 5, 14), 20], 
      [Date.UTC(2014, 5, 15), 30], 
      [Date.UTC(2014, 5, 16), 25], 
      [Date.UTC(2014, 5, 19), 10], 
      [Date.UTC(2014, 5, 20), 15] 
     ] 
    }, { 
     name: 'Category II', 
     data: [ 
      [Date.UTC(2014, 5, 14), 25], 
      //[Date.UTC(2014, 5, 15), 10], 
      [Date.UTC(2014, 5, 16), 35], 
      [Date.UTC(2014, 5, 19), 25], 
      [Date.UTC(2014, 5, 20), 5] 
     ] 
    }, { 
     name: 'Category III', 
     data: [ 
      [Date.UTC(2014, 5, 14), 10], 
      [Date.UTC(2014, 5, 15), 20], 
      [Date.UTC(2014, 5, 16), 35], 
      //[Date.UTC(2014, 5, 19), 25], 
      [Date.UTC(2014, 5, 20), 15] 
     ] 
    }] 
});

источник

2015-02-13 mortdale

Возможное решение может быть установив 'series.index' http://api.highcharts.com/highstock#series.index. Это поможет именно вашему примеру: http://jsfiddle.net/SashkaCosmonaut/G5S9L/14/. Но для других случаев, когда могут появляться больше баров с нулевыми значениями, это решение не поможет. Как мы можем видеть здесь: http://forum.highcharts.com/highcharts-usage/only-ever-3-columns-so-remove-gaps-inbetween-t27582/ _К сожалению, что-то вроде этого не поддерживается. Даже столбцы с нулями или нулями занимают пространство. Но я думаю, что может существовать более сложное решение. – Alexander

Вы можете попробовать использовать укладки и сделать некоторые манипуляции с стека в серии, но вид вашей диаграммы будет изменен.

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      type: 'column' 
 
     }, 
 
     title: { 
 
      text: 'Stacked bar chart' 
 
     }, 
 
     xAxis: { 
 
      type: 'datetime', 
 
     }, 
 
     yAxis: { 
 
      min: 0, 
 
      title: { 
 
       text: 'Testing' 
 
      } 
 
     }, 
 
     plotOptions : { 
 
      column: { 
 
       stacking: 'normal' 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: 'Category I', 
 
      data: [ 
 
       [Date.UTC(2014, 5, 14), 20], 
 
       [Date.UTC(2014, 5, 15), 30], 
 
       [Date.UTC(2014, 5, 16), 25], 
 
       [Date.UTC(2014, 5, 19), 10], 
 
       [Date.UTC(2014, 5, 20), 15] 
 
      ], 
 
      stack : 0 
 
     }, { 
 
      name: 'Category II', 
 
      data: [ 
 
       [Date.UTC(2014, 5, 14), 25], 
 
       //[Date.UTC(2014, 5, 15), 10], 
 
       [Date.UTC(2014, 5, 16), 35], 
 
       [Date.UTC(2014, 5, 19), 25], 
 
       [Date.UTC(2014, 5, 20), 5] 
 
      ], 
 
      stack : 0 
 
     }, { 
 
      name: 'Category III', 
 
      data: [ 
 
       [Date.UTC(2014, 5, 14), 10], 
 
       [Date.UTC(2014, 5, 15), 20], 
 
       [Date.UTC(2014, 5, 16), 35], 
 
       //[Date.UTC(2014, 5, 19), 25], 
 
       [Date.UTC(2014, 5, 20), 15] 
 
      ], 
 
      stack : 2 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

источник

2015-02-13 15:53:13 Anatoli

Это неправильный ответ, но полезный и простой в реализации. Благодарю. – mortdale

Как скрыть пустой столбец в столбце hightcharts с несколькими рядами

ответ

Смежные вопросы