高图显示带有文本的空白列

Question

请查看图片，需要在$response = [ 'status' => 'ok', 'data' => $database->resultset(), ]; if (empty($response['data'])) { Flash::set_alert("Property details has successfuly saved. "); $response=[ 'status' => 'redirect', 'data' => '/search.php', ]; } / $(document).ready(function () { $('#propertySearch').submit(function (e) { e.preventDefault(); $.ajax({ url: 'api.php', type: "POST", dataType: 'json', // add json datatype to get json data: $('#propertySearch').serialize(), success: function (data) { console.log(data); initMap(data.data); } }); }); }); 列上显示标题。

这是jsfiddle http://jsfiddle.net/ws5ez0j9/4/

我用Chart Title做到了，但这不是解决问题的方法。

需要<md-content class="acc-content"> <md-list> <md-list-item> <md-checkbox ng-disabled="true" ng-checked="true"></md-checkbox> <p class="md-list-item-text">Agree to terms and conditions</p> </md-list-item> <md-list-item> <md-checkbox></md-checkbox><p>Provide personal details</p> </md-list-item> <md-list-item> <md-checkbox></md-checkbox><p>Bank details</p> </md-list-item> </md-list> </md-content> 列之类的内容，它将显示在“移动”视图中。

Answer 1

您可以使用load event高图和annotations动态地做到这一点。像这样：

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/