Question

我正在尝试制作一个落后于价格转换器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%;
}

Answer 1

我认为这就是你所追求的目标。

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

使用Google Charts创建整页背景折线图

1 个答案: