javascript - 在 highcharts 图表中将平均值显示为列

Question

我想要在散点图顶部有一些表格，但不知道如何做到这一点。我目前拥有的是带有数据的散点图，请参阅( http://jsfiddle.net/uynp3svh/ )。我想要的是显示两个小时之间的平均值。无法使用工具提示，因为图表已经在使用工具提示。

我尝试通过添加下表来解决此问题，并使用一些 css 将其放置在正确的位置。但是当调整屏幕大小时，表格不再位于正确的位置。所以这不是最好的解决方案。

<div id="table">
  <div class="inner-table">
    <table>
      <tr>
        <td>10</td>
        <td>12</td>
        <td>0.8</td>
        <td>4</td>
        <td>8</td>
        <td></td>
        <td>2</td>
        <td></td>
        <td>3.95</td>
        <td>11</td>
        <td></td>
        <td>21</td>
      </tr>
    </table>
  </div>

Answer 1

下面是使用附加 x 轴来实现此目的的示例。

它要求您有一个时间戳数组和一个要显示的值数组，即:

var averages = [
    10,
    12,
    0.8,
    4,
    8,
    null,
    2,
    null,
    3.95,
    11,
    null,
    21
  ],
  times = [
    Date.UTC(2000, 0, 1, 1, 0),
    Date.UTC(2000, 0, 1, 3, 0),
    Date.UTC(2000, 0, 1, 5, 0),
    Date.UTC(2000, 0, 1, 9, 0),
    Date.UTC(2000, 0, 1, 11, 0),
    Date.UTC(2000, 0, 1, 13, 0),
    Date.UTC(2000, 0, 1, 15, 0),
    Date.UTC(2000, 0, 1, 17, 0),
    Date.UTC(2000, 0, 1, 19, 0),
    Date.UTC(2000, 0, 1, 21, 0),
    Date.UTC(2000, 0, 1, 23, 0),
    Date.UTC(2000, 0, 1, 23, 0)
  ];

然后只需使用 times 数组来设置tickPositions，并使用averages 数组来设置轴标签值即可。

更新的 fiddle :

• http://jsfiddle.net/uynp3svh/3/

再说一遍，这只是众多方法中的一种。

无论采取什么方式，拥有时间数组和值数组都将是关键。