Question

我创建了一个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。线条和图形本身看起来很棒。但是，我的haxis间隔甚至不是正确的。当我查看我的图表时，其中三个h轴间隔是1991.这条线经过了这些间隔中的每一个，但正如你所看到的，没有一个数据值变成1991.我想我说的是，怎么做我改变了这些haxis值，以便它们与我的数据点对齐而不是错误？

Answer 1

你最好的选择是使用＆＃34; date＆＃34;键入轴而不是＆＃34;数字＆＃34;输入类型，并将数据输入为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/

为什么我的折线图间隔错了？

1 个答案: