javascript - 谷歌折线图定制

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
    }
};