HighChart：在网格线之后显示一些数据

Question

我有一个使用highchart制作的折线图。

仅在Y轴上会有一定数量的值，并且必须在网格结束后显示一些数据。

预期结果：

当前实施：

Highcharts.chart('container', {
  title: {
    text: 'Data Table Example'
  },

  chart: {
    borderWidth: 1,
    borderColor: '#ccc',
    spacingBottom: 30
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    data: [0, 2, 1, 3, 2, 2, 1, 0, 2],
  }],
  exporting: {
    showTable: true
  }

})

<script src="https://code.highcharts.com/highcharts.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div id="container" class="col-sm-8"></div>
  <div id="grid" class="col-sm-4">


    <table class="table">
      <thead>
        <tr>
          <th>Count</th>
          <th>%</th>
          <th>Comments</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>0</td>
          <td>0</td>
          <td>NA</td>
        </tr>
        <tr>
          <td>1</td>
          <td>11</td>
          <td>A</td>
        </tr>
        <tr>
          <td>4</td>
          <td>44</td>
          <td>B</td>
        </tr>
        <tr>
          <td>2</td>
          <td>22</td>
          <td>B</td>
        </tr>
        <tr>
          <td>2</td>
          <td>22</td>
          <td>C</td>
        </tr>
      </tbody>
    </table>



  </div>
</div>

我们需要确保它对所有不同的设备保持响应。我创建的表在某些特定分辨率下表现良好。

Answer 1

要始终使gridLines和表格线具有相同的位置，可以基于yAxis刻度位置计算每个表格行的高度。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-innovation">
    <div class="content">
        <div class="d-flex flex-column m-5 justify-content-center">
            <h1>Dont apply filter on me.</h1>
           
          
        </div>
    </div>
</div>

实时演示：http://jsfiddle.net/BlackLabel/avgb1cu0/