Time-Date 和 Highchart 中的事件图表或图表

Question

我正在使用高图表来显示特定人物的时间和事件。但我不明白要使用哪个图表。下图就是例子。我也想做。

Answer 1

This is a simple example 仅使用 css 和 html。它非常有限但功能（固定宽度的工具提示等）。您可以轻松地使其更加灵活，这只是为了证明它是可能的。

<div class="list">
    <div class="period">...</div>
    <div class="period">15/5
        <span class="tool-tip">info</span>
    </div>
    <div class="period">16/5/2015
        <span class="tool-tip">info 2</span>
    </div>
    <div class="period">17/5
        <span class="tool-tip">fixed width</span>
    </div>
    <div class="period">18/5</div>
    <div class="arrow-right"></div>
</div>

.period{
    float:left;
    position:relative;
    display:inline-block;
    ...
}
.tool-tip{
    height:35px;
    line-height: 25px;
    position: absolute;
    ...
}

主要要注意的是每个部分都是一个行内框，然后工具提示相对于它定位。

Time-Date 和 Highchart 中的事件图表或图表

Time-Date and Event chart or Graph in Highchart

javascript

jquery

google-visualization

highcharts