在highcharts图上放置一个半透明的div

时间:2014-03-21 20:40:00

标签: javascript jquery highcharts

是否可以在生成的highcharts图上放置div?如同一个具有透明背景的div,其中包含文本,仅用于美学目的。

能够选择图表并不重要 - 只需看到它。

2 个答案:

答案 0 :(得分:1)

只需要在CSS中完成你想做的事。

正如评论中所提到的,您希望拥有一个relative容器,然后absolute将元素置于其中。

HTML

<div class="container">
    <canvas id="myCanvas"></canvas>
    <div class="overlayed"></div>
</div>

CSS

.container {
    width: 150px;
    height: 150px;
    position: relative;
}
div.overlayed, canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

我只使用了一个示例画布元素来了解图表的位置。

<强> Here's a JSFiddle

答案 1 :(得分:0)

使用比Highcharts图表更高的z-index添加div。请参阅:http://jsfiddle.net/Ww5Tg/9/

<div class="over"></div>
<div id="container" style="height: 300px; width: 400px"></div>

和CSS:

.over {
    width: 400px;
    height: 300px;
    position: absolute;
    z-index: 100;
    border: 1px solid black;
    background-color: black;
    opacity: 0.2;    
}