創建使用谷歌圖表

我試圖做一個線圖就是那張在價格轉換器div的背後整個頁面的背景折線圖。我不希望它具有任何座標軸，我怎樣才能移除它們並讓該行到達頁面的兩端？如果可能的話，我也希望線路落後於價格框。創建使用谷歌圖表

這裏是我有現在：

google.load('visualization', '1', {packages: ['corechart', 'line']}); 
    google.setOnLoadCallback(drawAxisTickColors); 

    function drawAxisTickColors() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('number', 'X'); 
      data.addColumn('number', 'Price'); 

      data.addRows([ 
      [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], 
      [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35], [12, 35], [13, 35], [14, 35], [15, 35], [16, 35], [17, 35], [18, 35], [19, 35], [20, 35], [21, 35], [22, 35], [23, 35] 
      ]); 

      var options = { 
      hAxis: { 
       gridlines: { 
        color: '#ffffff' 
       }, 
      }, 
      vAxis: { 
       gridlines: { 
        color: '#ffffff' 
       }, 
         }, 
      colors: ['blue', '#ffffff'], 
      legend: 'none' 
      }; 
      var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
      chart.draw(data, options); 
     } 
     </script> 
    <center> 
     <div class = "ratesBox"> 
     <div class = "bitcoin"> 
      <div class = "rateboxy"><input value = "1" type="text" name = "btc" id="btc" class="rate" onchange="btcConvert(this);" onkeyup ="btcConvert(this);"/></div> 
     </div> 
     <div class= "unitBox"> 
      <div class = "smallUnitBox" onclick="satoshiConvert(btc);" id="satoshiBox">sat</div> 
      <div class = "smallUnitBox" onclick="bitConvert(btc);" id="bitBox">bit</div> 
      <div class = "smallUnitBox" onclick="mBTCConvert(btc);"id="mBTCBox">mBTC</div> 
      <div class = "smallUnitBox2" onclick="bitcoinConversion(btc);" id="BTCBox">BTC</div> 
     </div> 
       <p id = "equals">=</p> 
      <div class = "rateboxy"><input value = "<?php echo $bitcoinPrice; ?>"type="text" name="cur" id="cur" class="rate" onchange="usdConvert(this);" onkeyup ="usdConvert(this);"/></div> 
     </div> 
    </center> 
     <div id="chart_div"></div> 
    </body> 
    </html>

造型爲線圖

#chart_div { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
}

來源

2015-11-11 Darkstar

這個鏈接可以幫助你去除圖的軸線http://stackoverflow.com/questions/19086308/how-to-disable-the-x-axis-and-y- axis-in-google-api-line-chart – brk

好的，謝謝，任何想法如何讓它佔據整個頁面？ – Darkstar

我覺得這是你追求的。

var options = { 
    chartArea: { 
     left: 0, 
     top: 0, 
     right: 0, 
     bottom: 0, 
     width: "100%", 
     height: "100%" 
    }, 
    hAxis: { 
     textPosition: 'none', 
     baselineColor: 'none', 
     gridlines: { 
      color: 'none' 
     }, 
    }, 
    vAxis: { 
     textPosition: 'none', 
     baselineColor: 'none', 
     gridlines: { 
      color: 'none' 
     } 
    }, 
    colors: ['blue', '#ffffff'], 
    legend: 'none' 
};

JSFiddle

來源

2015-11-12 23:28:05

太棒了！按預期工作。我該如何將頁面上的圖形居中放置？ – Darkstar

如果寬度爲100％，則不需要水平居中，否？ –

對不起，我的意思是垂直居中。我嘗試使用CSS設置chart_div的寬度爲50％，然後是25％的margin-top，但它看起來並不集中。 – Darkstar

創建使用谷歌圖表

回答

相關問題