如何在我的 Flot 图表周围放置一个方框？

Question

我用 Flot 创建了一个图表（使用 JQuery 1.11）。我希望我的图形周围有一个暗框，网格在背景中较亮，类似于主要的 Flot 示例 — http://www.flotcharts.org/flot/examples/basic-usage/index.html 。所以我有这个 HTML，FLot 将自己包裹在上面……

<div class="demo-container">
    <div id="placeholder" class="demo-placeholder" style="width:800px; height:500px;"></div>
</div>

然后我添加这个 CSS

.demo-container {
  padding: 10px;
  background-color: orange;
  border: 1px solid #000000;
  box-sizing: border-box;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

但这会在我的主容器周围放置一个框，而不是图表。我如何在图表周围得到一个框？我在这方面的尝试是在 Fiddle — http://jsfiddle.net/y16h8LmL/5/ 中。谢谢，-戴夫

Answer 1

您需要更改 borderWidth

的值

grid: {
  margin: 10,
  labelMargin: 5,
  labelWidth: 20,
  hoverable: true,
  clickable: true,
  tickColor: "#efefef",
  borderWidth: 0, // Here for the width
  borderColor: "#efefef" // Here for the color
},

这是your fiddle updated :)

Answer 2

此配置在您的 javascript 代码中而不是 css:

在您的 js 代码中，grid 部分：变化：

tickColor: "#efefef",
borderWidth: 0,
borderColor: "#efefef"

收件人：

tickColor: "#cccccc",
borderWidth: 1,
borderColor: "#000000"

或您喜欢的任何颜色或宽度。

如何在我的 Flot 图表周围放置一个方框？

How do I put a box around my Flot graph?

css

jquery

border

flot

box