Question

我是javascript和Google Visualization库的新手。我创建了一个折线图，如下面的1，但不能让Y轴显示任何东西;我正在寻找要绘制的轴本身以及数据表中的值。

这是我的代码（图表标签从屏幕截图中更改，但仅此而已）：

google.setOnLoadCallback(drawLineChart);
function drawLineChart(){var data=google.visualization.arrayToDataTable(
    [
        [
            'Day',
            'Label 1','Label 2','Label 3','Label 4','Label 5',
            'Label 6','Label 7','Label 8','Label 9','Label 10',
        ],
        ['19 Aug 2013',1,0,0,0,0,0],
        ['20 Aug 2013',2,2,2,0,0,0],
        ['21 Aug 2013',5,5,0,6,5,0],
        ['22 Aug 2013',1,4,3,2,0,0],
        ['23 Aug 2013',0,0,0,4,0,0],
        ['24 Aug 2013',3,2,1,2,0,15],
        ['25 Aug 2013',1,2,1,2,0,0],
        ['26 Aug 2013',3,1,2,1,0,0],
        ['27 Aug 2013',0,0,3,2,0,1]
    ]);

    var options = {
        title:'Title',
        legend:{position:'bottom'},
        curveType:'none',
        interpolateNulls:true,
        chartArea:{left:0,top:10,width:"100%"}
    };

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

Screenshot

Answer 1

将chartArea.width选项保持为100％的替代答案：将vAxis.textPosition选项设置为＆＃34;在＆＃34;中，这将在chartArea中绘制标签：

var options = {
    title:'Title',
    legend:{position:'bottom'},
    curveType:'none',
    interpolateNulls:true,
    chartArea:{left:0,top:10,width:"100%"},
    vAxis:{textPosition: 'in'}
};

这将为您提供chartArea边缘内的轴标签

Answer 2

有几件事：

您有额外的标签，不需要。您编写的代码根本不起作用。将标签数量减少到您拥有的列数。
添加字符串，并希望它们被解释为日期不能很好地工作。说清楚。
您的图表区域也排除了vAxis标签。

尝试以下方法：

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Day');
  data.addColumn('number', 'Label 1');
  data.addColumn('number', 'Label 2');
  data.addColumn('number', 'Label 3');
  data.addColumn('number', 'Label 4');
  data.addColumn('number', 'Label 5');
  data.addColumn('number', 'Label 6');
  data.addRows([
        [new Date('19 Aug 2013'),1,0,0,0,0,0],
        [new Date('20 Aug 2013'),2,2,2,0,0,0],
        [new Date('21 Aug 2013'),5,5,0,6,5,0],
        [new Date('22 Aug 2013'),1,4,3,2,0,0],
        [new Date('23 Aug 2013'),0,0,0,4,0,0],
        [new Date('24 Aug 2013'),3,2,1,2,0,15],
        [new Date('25 Aug 2013'),1,2,1,2,0,0],
        [new Date('26 Aug 2013'),3,1,2,1,0,0],
        [new Date('27 Aug 2013'),0,0,3,2,0,1]
    ]);

  var options = {
      title:'Title',
      legend:{position:'bottom'},
      curveType:'none',
      interpolateNulls:true,
      //chartArea:{left:0,top:10,width:"100%"}
  };

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

谷歌可视化折线图缺少Y轴

2 个答案: