Google線形圖自定義

Question

我這里有這些折線圖和來自arduino的實時數據。

我想做的是使第一個圖（溫度）更好看。 我想始終在頂部和底部之間留出一些空隙（例如濕度），並且我想增加溫度的Y軸寬度。 這可能嗎 ？

兩種圖表都以完全相同的設置運行：

 function drawTemperature() {
    $.ajax({
        url: 'http://192.168.1.3/Charts/chart_temperature.php',
        dataType: 'json',
        success: function (jsonData) {
            // Create our data table out of JSON data loaded from server.
            var data = new google.visualization.DataTable(jsonData);

            var options =  {
                'title': 'Temperature',
                'width': 1200,
                'height': 600
                //'legend.alignment' : 'start',
                //'hAxis.baseline' : 5,
                //'chartArea.top' : 20,
                //'chartArea.left' : 500
                //'focusTarget' : 'category'
                //'animation.easing' : 'inAndOut'
                //colors:['blue','#004411'],
                //'hAxis.maxValue' : 30,
                //'hAxis.showTextEvery' : 0.1,
                //'hAxis.logScale' : 'true',
                //'hAxis.gridlines.color' : '#00CC00',
                //'hAxis.maxAlternation' : 10,
                //'hAxis.viewWindow.max' : 10

                //'curveType': 'function'
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.LineChart(document.getElementById('chart_temperature'));
            chart.draw(data, options);
        }
    });
}

 function drawHumidity() {
    $.ajax({
        url: 'http://192.168.1.3/Charts/chart_humidity.php',
        dataType: 'json',
        success: function (jsonData) {
            // Create our data table out of JSON data loaded from server.
            var data = new google.visualization.DataTable(jsonData);

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.LineChart(document.getElementById('chart_humidity'));
            chart.draw(data, {width: 1200, height: 600});
        }
    });
}

 function drawVisualization() {
               drawTemperature();
               drawHumidity();

            }

Answer 1

您可以通過將vAxis.minValue和vAxis.maxValue選項設置為小於圖表數據的最大值和最小值的值來在圖表的頂部和底部創建“間隙”。 這是您可以執行此操作的一種方法：

var range = data.getColumnRange(1);
var options = {
    title: 'Temperature',
    width: 1200,
    height: 600,
    vAxis: {
        minValue: range.min - 1,
        maxValue: range.max + 1
    }
};