Высокие диаграммы показывают пустой столбец с текстом

Question

Пожалуйста, смотрите изображение, необходимо указать заголовок в столбце null / blank.

вот jsfiddle http://jsfiddle.net/ws5ez0j9/4/

То, что я сделал это с помощью заголовка диаграммы, но это не выход.

Нужен столбец title или что-то подобное, чтобы он отображался в мобильном представлении.

Answer 1

Вы можете сделать это динамически с событием загрузки старших графиков и аннотациями . Как это:

chart: {
  type: 'column',
  events: {
    load: function() {
      for (let i = 0; i < this.series[0].data.length; i++) {
        if (this.series[0].data[i].y == null && this.series[1].data[i].y == null) {
          this.addAnnotation({
            labelOptions: {
              backgroundColor: 'rgba(255,255,255,0.5)',
              borderWidth: 0,
            },
            labels: [{
              point: {
                x: i,
                y: 0,
                xAxis: 0,
                yAxis: 0
              },
              text: 'Your title here',
              shape: 'rect',
              style: {
                fontSize: '20px'
              }
            }]
          })
        }
      }
      this.redraw()
    }
  }
},

Будет напечатан текст для каждой позиции на графике, которая не имеет значений.

Предполагается, что у вас есть две серии, обе со значениями null, в которых отсутствуют данные. После того, как точка без данных найдена, на ее место добавляется аннотация.

Существует множество опций для игры, стиля и расположения аннотации в точности так, как вы хотите.

Это будет работать, только если было включено <script src="https://code.highcharts.com/modules/annotations.js"></script>.

var investment = 10000;
Highcharts.chart('updown_chart', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        for (let i = 0; i < this.series[0].data.length; i++) {
          if (this.series[0].data[i].y == null && this.series[1].data[i].y == null) {
            this.addAnnotation({
              labelOptions: {
                backgroundColor: 'rgba(255,255,255,0.5)',
                borderWidth: 0,
                verticalAlign: 'top',
                y: 0
              },
              labels: [{
                point: {
                  x: i,
                  y: 0,
                  xAxis: 0,
                	yAxis: 0
                },
                text: 'Your title here',
                shape: 'rect',
                style: {
                	fontSize: '20px'
                }
              }]
            })
          }
        }
        this.redraw()
      }
    }
  },

  xAxis: {
    categories: ['pa', 'p2', 'p3', 'p4'],
    reversed: false,
    labels: {
      step: 1
    }
  },
  yAxis: [{
    title: {
      text: null
    },
    labels: {
      formatter: function() {
        return this.value + '%';
      }
    },

    stackLabels: {
      enabled: true,
      align: 'center',
      formatter: function() {
        var newval = this.total;
        var pval = Math.abs(this.total);
        var amount = parseInt((investment * pval) / 100);
        if (this.isNegative) {
          newval = '-' + pval + '%' + ' ($' + amount + ')';
        } else {
          newval = '+' + pval + '%' + ' ($' + amount + ')';
        }
        return newval;
      }
    }
  }],

  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },

  tooltip: {
    formatter: function() {
      return '<b>' + this.point.category + '</b><br/>' +
        this.series.name + ': ' + Highcharts.numberFormat(this.point.y, 2) + '%';
    }
  },
  credits: {
    enabled: false
  },

  series: [{
    showInLegend: false,
    name: 'aa',
    color: '#428bca',
    data: [10, 20, 10, null]
  }, {
    showInLegend: false,
    name: 'bb',
    color: '#15315A',
    data: [-10, -20, -30, null]
  }],
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<div id="updown_chart">

</div>

Пример работы jsfiddle: http://jsfiddle.net/ewolden/p4e0m1w6/4/