Question

我试图制作一个谷歌图表，其中y轴上的价格和x轴上的日期。我不明白为什么我的代码不起作用。它没有显示任何内容。

在标题中：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Dato');
  data.addColumn('number', 'Anbefalet pris');
  data.addColumn('number', 'Nuværende pris');

  data.addRows([
    [new Date (2016, 8, 6), 378, 418],
    [new Date (2016, 8, 13), 66, 324],
    [new Date (2016, 8, 20), 254, 257],
    [new Date (2016, 8, 27), 117, 105],
    [new Date (2016, 9, 3), 119, 66],
    [new Date (2016, 9, 10), 88, 77],
    [new Date (2016, 9, 17), 76, 96],
    [new Date (2016, 9, 24), 123, 106],
    [new Date (2016, 10, 1), 66, 148],
    [new Date (2016, 10, 8), 128, 116]
  ]);

  var options = {
    chart: {
      title: 'Anbefalede og nuværende ugepriser',
      subtitle: 'Blå: Anbefalede priser, Rød: Nuværende priser'
    },
    legend: { position:'none' },
    width: '100%',
    pointSize: 10,
    explorer: { actions: ['dragToZoom', 'rightClickToReset'] }
  };


  var chart = new google.charts.LineChart(document.getElementById('linechart_material'));

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

身体：

<div id="linechart_material" class="chart"></div>

非常感谢任何帮助。

Answer 1

素材图表使用命名空间google.charts

核心图表使用命名空间google.visualization

所以对于核心图表折线图 - google.visualization.LineChart

材料折线图 - google.charts.Line

请参阅以下代码段，其中包含两个...

对于软件包，使用'corechart'或'line'代表材料
如果使用材料，请不要忘记google.charts.Line.convertOptions

但是，有几个options无法在材料中工作建议使用带有theme: 'material'

选项的核心图

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Dato');
    data.addColumn('number', 'Anbefalet pris');
    data.addColumn('number', 'Nuværende pris');

    data.addRows([
      [new Date (2016, 8, 6), 378, 418],
      [new Date (2016, 8, 13), 66, 324],
      [new Date (2016, 8, 20), 254, 257],
      [new Date (2016, 8, 27), 117, 105],
      [new Date (2016, 9, 3), 119, 66],
      [new Date (2016, 9, 10), 88, 77],
      [new Date (2016, 9, 17), 76, 96],
      [new Date (2016, 9, 24), 123, 106],
      [new Date (2016, 10, 1), 66, 148],
      [new Date (2016, 10, 8), 128, 116]
    ]);

    var tickMarks = [];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      tickMarks.push(data.getValue(i, 0));
    }

    var options = {
      chart: {
        title: 'Anbefalede og nuværende ugepriser',
        subtitle: 'Blå: Anbefalede priser, Rød: Nuværende priser'
      },
      legend: { position:'none' },
      width: '100%',
      pointSize: 10,
      explorer: { actions: ['dragToZoom', 'rightClickToReset'] },
      hAxis: {
        format: 'MM/dd/yyyy',
        ticks: tickMarks
      }
    };

    var chart = new google.charts.Line(document.getElementById('linechart_material'));
    chart.draw(data, google.charts.Line.convertOptions(options));
    chart = new google.visualization.LineChart(document.getElementById('linechart_core'));
    chart.draw(data, options);
  },
  packages: ['corechart', 'line']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Material Chart</div>
<div id="linechart_material"></div>
<div>Core Chart</div>
<div id="linechart_core"></div>

＆＃13;

Google Charts上x轴上的日期

1 个答案: