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

Posted 2021-05-05

我有一个使用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>

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

答案

要始终使用gridLines和table lines的相同位置，可以根据yAxis tick位置计算每个表行的高度。

chart: {
    events: {
        render: function() {
            var chart = this,
                ticks = chart.yAxis[0].ticks,
                rows = $(".table").find("tr"),
                heights = [];

            Highcharts.objectEach(ticks, function(tick, i) {
                heights.push(tick.gridLine.d.split(' ')[2]);
            });

            heights.reverse();

            for (var i = 0; i < rows.length; i++) {
                if (i === rows.length - 1) {
                    $(rows[i]).css('height', chart.chartHeight - heights[heights.length - 1])
                } else if (i > 0) {
                    $(rows[i]).css('height', heights[i] - heights[i - 1])
                } else {
                    $(rows[i]).css('height', heights[i])
                }

            }
        }
    }
}

现场演示：http://jsfiddle.net/BlackLabel/avgb1cu0/