Дублированные числа в Google Charts Вертикальная ось

Question

Я работал над исправлением с визуализациями Google для комбинированной диаграммы (столбец / линия), когда одна из осей стала странной и начала повторять числа (то есть: 1, 1, 2, 2 вместо 1, 2, 3, 4). Пожалуйста, смотрите изображение ниже

http://913a0d0e6c09b4bcc628-22cb2ea15f760b88c7ec5dccd300db1d.r25.cf1.rackcdn.com/duplicate_axes.png

Вот настройки параметров диаграммы:

// Instantiate and draw our chart, passing in some options. 
var frequency_by_day_options = {
    vAxes: [
        {format:'#,###', title:"Call Volume"}, 
        {format: '#%', title:'Missed Call Rate',
          viewWindow:{
            max:1,
          }}
        ],      
    legend: {position: 'none'},
    chartArea: { height:'60%', width:'60%'},
    width: 800,
    height: 350,
    backgroundColor: 'transparent',
    bar: { groupWidth: '90%'},
    isStacked: true,
    seriesType: 'bars',
    series: {0: {type:'bar', targetAxisIndex:0}, 1: {type:'line', targetAxisIndex:1},},
    colors: ['blue', 'green'],
    animation:{
        duration: 1000,
        easing: 'out',},
    };

Я понятия не имею, что здесь происходит. Даже когда я закомментирую все опции vAxis, я все еще наблюдаю это поведение. Любые идеи о том, что я делаю не так? Это сводит меня с ума:)

Answer 1

Я столкнулся с той же проблемой, когда у нас меньше ящиков (скажем, 1 или 2). Я решил это с параметром maxValue. Просто добавьте параметр maxValue = 4 в ваш vaxis. Это добавит 5 (от 0 до 4) линий сетки всегда. Если ваше maxValue больше 4, оно будет настроено автоматически. Мой работает нормально с опциями (название: "Нет коробок", формат: "#", minValue:0, maxValue:4). minValue = 0 не допустит негативов, так как их нет из блоков.

Answer 2

Я собираюсь догадаться, что vAxis слева - это не 4, а фактически 2. Эти 5 меток - 0, 0.5, 1, 1.5, 2.

Поскольку у вас установлен формат "#,###", он не будет отображать десятичные дроби. Если вы измените его на "#,###.#", То он покажет 0, 0,5, 1, 1,5, 2.

Существует дюжина способов ее решения, но проще всего убедиться, что значения вашей оси являются только целыми числами с помощью функции javascript, подобной этой:

// Take the Max/Min of all data values in all graphs
var totalMax = 3;
var totalMin = -1;

// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));

// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10);
var roundingDec = Math.pow(10,roundingExp);

// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;

// Determine the range of your values
var range = newMax - newMin;

// Calculate the best factor for number of gridlines (2-5 gridlines)
// If the range of numbers divided by 2 or 5 is a whole number, use it
for (var i = 2; i <= 5; ++i) {
    if ( Math.round(range/i) = range/i) {
        var gridlines = i
    }
}