Почему интервалы моего графика неверны?

0

У меня есть диаграмма линии google, созданная для отображения значений на основе временных интервалов. Вот моя полная настройка графика:

 var inputData = [[1990,5335293,"Jan 1990\n5,335,293"],[1990,5309932,"Feb 1990\n5,309,932"],[1990,5327306,"Mar 1990\n5,327,306"],[1990,5354168,"Apr 1990\n5,354,168"],[1990,5394006,"May 1990\n5,394,006"],[1990,5448990,"Jun 1990\n5,448,990"],[1990,5474112,"Jul 1990\n5,474,112"],[1990,5446876,"Aug 1990\n5,446,876"],[1990,5382558,"Sep 1990\n5,382,558"],[1990,5410053,"Oct 1990\n5,410,053"],[1990,5399647,"Nov 1990\n5,399,647"],[1990,5386422,"Dec 1990\n5,386,422"]] ;
        var month = "All Months" ;

        if (month == "All Months") {
        var b = [];
        for (i=0; i < inputData.length; i++) {

            var year_with_month = inputData[i][0] + i * 1/12;
            var e = [year_with_month, inputData[i][1], inputData [i][2]]
            b.push(e);

        }
        inputData = b;
        }

 google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {    
var data = new google.visualization.DataTable();
  data.addColumn('number', 'Year');
  data.addColumn('number', month);
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addRows(inputData);

  var formatter = new google.visualization.NumberFormat({groupingSymbol: ',', fractionDigits: '0'});
    formatter.format(data, 1);  

    var options = {
    tooltip: {textStyle: {bold: 'false', color: 'black'}},
    legend: {position: 'none'},
      hAxis: {title: 'Year', format: '####', viewWindowMode:'maximized'},
   vAxis: {title: 'Number in Labor Force'},
   colors:['green'],


    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

Я использую оператор if, чтобы изменить каждый 1-й элемент в массиве, чтобы добавить 1/12 в зависимости от того, какой он месяц. Строка и сам график отлично смотрятся. Тем не менее, мои интервалы хакса даже не близки к правильному. Когда я смотрю на свой график, три из интервалов оси h - это 1991 год. Линия проходит через каждый из этих интервалов, но, как вы можете видеть, ни одно из значений данных никогда не становилось в 1991 году. Я предполагаю, что я говорю, как сделать Я изменяю эти значения haxis, чтобы они совпадали с моими точками данных, а не были неправильными?

Теги:
linechart
google-visualization

1 ответ

0

Лучше всего использовать ось типа "дата" вместо типа "число" и вводить ваши данные как объекты Date, например:

var inputData = [[1990,5335293,"Jan 1990\n5,335,293"],[1990,5309932,"Feb 1990\n5,309,932"],[1990,5327306,"Mar 1990\n5,327,306"],[1990,5354168,"Apr 1990\n5,354,168"],[1990,5394006,"May 1990\n5,394,006"],[1990,5448990,"Jun 1990\n5,448,990"],[1990,5474112,"Jul 1990\n5,474,112"],[1990,5446876,"Aug 1990\n5,446,876"],[1990,5382558,"Sep 1990\n5,382,558"],[1990,5410053,"Oct 1990\n5,410,053"],[1990,5399647,"Nov 1990\n5,399,647"],[1990,5386422,"Dec 1990\n5,386,422"]] ;
var month = "All Months" ;

if (month == "All Months") {
    var b = [];
    for (i=0; i < inputData.length; i++) {
        var d = new Date(inputData[i][0], i, 1);
        var e = [d, inputData[i][1], inputData [i][2]];
        b.push(e);
    }
    inputData = b;
}
function drawChart() {    
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Year');
    data.addColumn('number', month);
    data.addColumn({type: 'string', role: 'tooltip'});
    data.addRows(inputData);

    var formatter = new google.visualization.NumberFormat({groupingSymbol: ',', fractionDigits: 0});
    formatter.format(data, 1);  

    var options = {
        tooltip: {textStyle: {bold: 'false', color: 'black'}},
        legend: {position: 'none'},
        hAxis: {title: 'Year', format: 'MMM yyyy', viewWindowMode:'maximized'},
        vAxis: {title: 'Number in Labor Force'},
        colors:['green']
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

Это также позволит вам пропустить ваши собственные всплывающие подсказки, поскольку даты могут быть отформатированы так, как вы хотите:

var dateFormatter = new google.visualization.DateFormat({pattern: 'MMM yyyy'});
dateFormatter.format(data, 0);

См. Рабочий пример на основе вашего кода здесь: http://jsfiddle.net/asgallant/XdncE/

  • 0
    Это прекрасно работает, если вы просто основываете его на одном году, но не работает, если у вас есть 4 года в массиве inputData.
  • 0
    var inputData = [[1990,5335293], [1990,5309932], [1990,5327306], [1990,5354168], [1990,5394006], [1990,5448990], [1990,5474112], [1990,5446876] ], [1990.5382558], [1990.5410053], [1990.5399647], [1990.5386422], [1991.5329520], [1991.5353131], [1991.5382615], [1991.5384256], [1991.5379892], [1991.5473590], [1991.5498405], [1991.5443969], [1991.5385556], [1991.5404738], [1991.5394658], [1991.5384613], [тысяча девятьсот девяносто-два , 5370549], [1992.5385960], [1992.5415314], [1992.5424056], [1992.5474452], [1992.5570736], [1992.5608156], [1992.5566925], [1992.5479084 ], [1992,5473027], [1992,5474260], [1992,5459028]];
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню