Question

我第一次使用谷歌图表。我正在尝试将条形图修改为折线图，其中我面临错误“容器未定义”。作为条形图，它工作正常，我将数据作为json响应，我的json响应是这样的。

[{"rate":0.7955,"month":"December"},{"rate":0.7822,"month":"November"},{"rate":0.7789,"month":"October"},{"rate":0.7915,"month":"September"},{"rate":0.7928,"month":"August"},{"rate":0.8002,"month":"July"},{"rate":0.8133,"month":"June"},{"rate":0.8218,"month":"May"},{"rate":0.8264,"month":"April"},{"rate":0.823,"month":"March"},{"rate":0.8201,"month":"February"},{"rate":0.8297,"month":"January"}]

我的js文件是

var TUTORIAL_SAVVY = {

 /*return google visualization data*/
 getvisualizationData: function (jsonData) {

  var point1, dataArray = [],

   data = new google.visualization.LineChart();

  data.addColumn('string', 'Rate');

  data.addColumn('number', 'Marks in Mathematics');

  data.addColumn({
    type: 'string',
    role: 'tooltip',
    'p': {
     'html': true
    }
   });


  /* for loop code for changing inputdata to 'data' of type google.visualization.DataTable*/
  $.each(jsonData, function (i, obj) {

   point1 = "Rate : " + obj.rate + "";


   dataArray.push([obj.month, obj.rate, TUTORIAL_SAVVY.returnTooltip(point1)]);
  });

  data.addRows(dataArray);

  return data;
 },
 /*return options for line chart: these options are for various configuration of chart*/
 getOptionForLinechart: function () {

  var options = {
   title:'Key Success Metrics over time across all channels',
                    'backgroundColor': 'transparent',
                    'width': 620,
                    'vAxis': {minValue:"0", maxValue:"100", gridlines:{count: 7} },
                    'chartArea': {top:"50", left: "40"},
                    'legend':{position: 'top', alignment: 'start' }
  };
  return options;
 },
 /*Draws a line chart*/
 drawLineChart: function (inputdata) {

  var lineOptions = TUTORIAL_SAVVY.getOptionForLinechart(),

   data = TUTORIAL_SAVVY.getvisualizationData(inputdata),

   chart = new google.visualization.LineChart(document.getElementById('student-line-chart'));

  chart.draw(data, lineOptions);
  /*for redrawing the line chart on window resize*/
  $(window).resize(function () {

   chart.draw(data, lineOptions);
  });
 },
 /* Returns a custom HTML tooltip for Visualization chart*/
 returnTooltip: function (dataPoint1) {

  return "<div style='height:30px;width:150px;font:12px,roboto;padding:15px 5px 5px 5px;border-radius:3px;'>" +
   "<span style='color:#68130E;font:12px,roboto;padding-right:20px;'>" + dataPoint1 + "</span>" ;

 },
 /*Makes ajax call to servlet and download data */
 getStudentData: function () {

  $.ajax({

      url: '/bin/servlet/rate',

    dataType: "JSON",

    success: function (data) {

     TUTORIAL_SAVVY.drawLineChart(data);
    }
   });
 }
};

google.load("visualization", "1", {
  packages: ["corechart"]
 });

$(document).ready(function () {

 TUTORIAL_SAVVY.getStudentData();
});

任何人都可以帮忙吗？

Google折线图无效

0 个答案: