圖位置

Question

創建2個highcharts即

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

    </div> 

我設置和寬度和高度是這樣

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

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

續圖表是容器圖表下，但我想圖表都在同一行檢查這

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>是塊元素。因此它總是在前面的元素下面。您需要使用假設<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} 

會幫助你。