1

我是 javascript 和 Google 可视化库的新手。我创建了如下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);}

截屏

4

3 回答 3

2

chartArea.width将选项保持在 100%的替代答案：将选项设置vAxis.textPosition为“in”，这将在 chartArea 内绘制标签：

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

这将为您提供图表区域边缘内的轴标签

于 2013-08-27T15:24:52.313 回答
0

有几件事：

  1. 您有不需要的额外标签。您编写的代码根本不起作用。将标签数量减少到您拥有的列数。
  2. 添加字符串并希望它们被解释为日期效果不佳。让它明确。
  3. 您的图表区域还排除了 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);
}
​
于 2013-08-27T14:02:38.227 回答
0

我有类似的问题。但是，就我而言，我根本没有使用 chartArea 选项。因此，我怀疑@asgallant 的解释是否正确。

以下是我的代码：

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    // Declare columns
    data.addColumn('date', 'Date');
    data.addColumn('number', 'MM8');
    data.addColumn('number', 'S&P');
    
    data.addRows([[new Date('01/03/2017'),98517.96,100278.03],[new Date('01/10/2017'),99606.27,100769.69],[new Date('01/17/2017'),97409.55,100724.83],[new Date('01/24/2017'),101596.78,101265.78],[new Date('01/31/2017'),103283.59,101212.49],[new Date('02/07/2017'),106136.74,101843.6],[new Date('02/14/2017'),102568.42,103820.0],[new Date('02/21/2017'),102253.38,105054.7],[new Date('02/28/2017'),98587.77,104977.42],[new Date('03/07/2017'),97623.69,105188.38],[new Date('03/14/2017'),99571.71,105057.8],[new Date('03/21/2017'),98026.27,104106.02],[new Date('03/28/2017'),100641.93,104752.24],[new Date('04/04/2017'),98556.17,104822.86],[new Date('04/11/2017'),99200.09,104539.5],[new Date('04/18/2017'),98695.49,104024.75],[new Date('04/25/2017'),102622.71,106086.42],[new Date('05/02/2017'),100472.95,106200.12],[new Date('05/09/2017'),98574.4,106455.5],[new Date('05/16/2017'),106159.07,106622.05],[new Date('05/23/2017'),104296.55,106522.12],[new Date('05/30/2017'),105035.88,107165.67],[new Date('06/06/2017'),107811.48,107894.94],[new Date('06/13/2017'),110670.8,108384.37],[new Date('06/20/2017'),110152.66,108236.92],[new Date('06/27/2017'),109044.62,107453.02],[new Date('07/03/2017'),108633.82,107880.72],[new Date('07/11/2017'),111239.13,107726.16],[new Date('07/18/2017'),113238.32,109284.19],[new Date('07/25/2017'),114516.89,110017.9],[new Date('08/01/2017'),114235.76,109983.26],[new Date('08/08/2017'),118583.33,109919.74],[new Date('08/15/2017'),117029.48,109461.84],[new Date('08/22/2017'),115461.52,108924.44],[new Date('08/29/2017'),113553.88,108648.63],[new Date('09/05/2017'),112772.29,109161.61],[new Date('09/12/2017'),113241.54,110877.3],[new Date('09/19/2017'),116056.94,111328.98],[new Date('09/26/2017'),114991.2,110893.29],[new Date('10/03/2017'),119650.15,112569.45],[new Date('10/10/2017'),119326.16,113282.73],[new Date('10/17/2017'),124032.6,113670.02],[new Date('10/24/2017'),125599.48,114103.94],[new Date('10/31/2017'),126408.48,114376.19],[new Date('11/07/2017'),126213.65,115059.27],[new Date('11/14/2017'),128414.88,114536.52],[new Date('11/21/2017'),132050.66,115431.9],[new Date('11/28/2017'),133242.73,116675.92],[new Date('12/05/2017'),130042.14,116788.29],[new Date('12/12/2017'),130220.51,118322.33],[new Date('12/19/2017'),133182.72,119093.34],[new Date('12/26/2017'),133313.89,119050.26],[new Date('01/02/2018'),133892.53,119730.23]
    ]);

    var options = {
      title: 'Portfolio Performance Comparison',
      curveType: 'function',
      legend: { position: 'bottom' },
      hAxis: {
        format: 'M/d/yy'
        }
     };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
  }
</script>

结果图

于 2022-02-09T02:13:24.537 回答