高图中的图表位置

Question

我创建了2个高图，即

<div>
   <p id="container">
   </p>
   <p id="cont">
   </p>

   </div>

我像这样设置和宽度和高度

 $('#cont').highcharts({
            chart: {
                width: 500,
                height: 300,

                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45
                }
            },

cont chart在容器图表下，但我希望图表在同一行中检查此

http://i.stack.imgur.com/bUpHZ.png

以及我如何添加边框

Answer 1

angular gauge demo on the Highcharts website显示了如何执行此操作的一个很好的示例。

在他们的代码中，他们像这样安排和设置他们的<div>元素：

<div style="width: 600px; height: 400px; margin: 0 auto">
    <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
    <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>

以下是它的外观：

现在，只要在图表中添加边框，您就可以这样做：

    chart: {
        type: 'solidgauge',
        borderColor: 'red',
        borderWidth: 1
    },

这会将这些图表更改为：

查看API文档，了解有关如何更改图表的其他外观选项的更多详细信息，包括边框半径和背景颜色：http://api.highcharts.com/highcharts#chart

我希望这有用。

Answer 2

<p>是一个块元素。因此它总是在前一个元素之下。你需要使用let <span>而不是<p>来调整spans的大小，以便它们适合一行：

<div>
  <span id="container">
  </span>
  <span id="cont">
  </span>
</div>

然后在css：

span#container {
  width: 50%;
}
span#cont {
  width:50%;
}

在CSS中添加边框。

Answer 3

您应该分开两个图表或使用CSS。

.highcharts-container{float:left;width:500px}

或

.container{float:left;width:500px}

会帮助你。