Как дать некоторую автоматическую маржу контента в строке Google Charts - PullRequest
Новая
       11

Как дать некоторую автоматическую маржу контента в строке Google Charts

0 голосов
/ 09 мая 2019

Я строю линейную диаграмму, используя Google Charts, и мне не удается понять, как автоматически установить некоторое пространство / поле вокруг содержимого графика. В документации найденная мною переменная, наиболее близкая к желаемой, - viewWindowMode: 'pretty', но она не работает. Более того, хотя я хотел бы, чтобы здесь были некоторые автоматические функции, я все же хотел бы иметь некоторый контроль над ним, сообщая, какой запас я хочу.

Вот график, который я сейчас получаю:

enter image description here

Как вы можете видеть, содержимое (линия) графика касается hAxis, поскольку оба значения в начале установлены в 11.900. В конце происходит то же самое: последние данные находятся в верхней части графика в 12.400. Я хотел бы иметь некоторый запас здесь, скажем, показ vAxis от 11.800 до 12.500.

Конечно, альтернативным способом сделать это было бы вручную вычислить, какое число является самым низким и самым большим из ряда, а затем вручную указать графику, чтобы показать vAxis со значениями ниже и больше, чем те, которые используют 

viewWindow: {
    min: minData
    ,max: maxData
}

Проблема в том, что на графике показано более одного контента (обратите внимание на верхнее меню на предыдущем рисунке), и они могут не совпадать. В этот момент вторые данные равны 0:

Second set of data

Вот мой текущий код: 

var options = {
    hAxis: {
        title: info.genericTitle
    },
    tooltip: {isHtml: true},
    vAxes: {
        // Adds titles to each axis.
        0: {title: var_title,
            viewWindowMode: 'pretty'
            //  ,baseline: 0
            /*,viewWindow: {
                min: minData
                ,max: maxData
            }*/
        },
        //https://developers.google.com/chart/interactive/docs/gallery/linechart
        1: {
            gridlines: {color: 'transparent', count: 2},
            baselineColor: 'transparent',
            textPosition: 'none'
            //,baseline: 0            
        }            
    },
    explorer: {
        actions: ['dragToZoom', 'rightClickToReset'],
        keepInBounds: true
    },

    seriesType: 'line',
    isStacked: false,

    chartArea: {
        backgroundColor: {
            gradient: {
                // Start color for gradient.
                color1: '#FFFFFF',
                // Finish color for gradient.
                color2: '#b3d9ff',
                //color2: '#1a82f7',
                // Where on the boundary to start and
                // end the color1/color2 gradient,
                // relative to the upper left corner
                // of the boundary.
                x1: '0%', y1: '0%',
                x2: '0%', y2: '100%'
            }
        },
        width: '80%'
    }
};
...